diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index 878fc3c7f..8b7e87299 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -5,6 +5,7 @@ date: 2019-08-08 11:33:00 +0800
categories: [Blogging, Demo]
tags: [typography]
math: true
+mermaid: true
image: /assets/img/sample/devices-mockup.png
---
@@ -12,18 +13,16 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
## Titles
-
---
+# H1 - heading
-# H1
+H2 - heading
-H2
-
-H3
-
-H4
+H3 - heading
+H4 - heading
---
+
## Paragraph
@@ -79,32 +78,50 @@ Click the hook will locate the footnote[^footnote].
## Images
-By default, the image is centered and the image caption can be displayed at the bottom:
+- Default (with caption)
_Full screen width and center alignment_
-You can change the size of the picture:
+
+
+- Specify width
{: width="400"}
_400px image width_
-In addition, you can use class `normal` , `left` and `right` to specify the image position (but in these case, the image caption is prohibited), for example:
+
-- Normal position
-
- {: width="350" class="normal"}
+- Left aligned
-- Float to the left
+{: width="350" class="normal"}
+
+
+
+- Float to left
{: width="240" class="left"}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
-- Float to the right
+
+
+- Float to right
{: width="240" class="right"}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
+
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+ title Adding GANTT diagram functionality to mermaid
+ apple :a, 2017-07-20, 1w
+ banana :crit, b, 2017-07-23, 1d
+ cherry :active, c, after b a, 1d
+```
+
## Inline code
This is an example of `Inline Code`.
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 963be9b2f..998a8b1f9 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -68,7 +68,22 @@ math: true
---
```
-## Preview Image
+## Mermaid
+
+[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block:
+
+```yml
+---
+mermaid: true
+---
+```
+
+Then you can use it like other markdown language: surround the graph code with ```mermaid
+and ```.
+
+## Images
+
+### Preview image
If you want to add an image to the top of the post contents, specify the url for the image by:
@@ -78,6 +93,49 @@ image: /path/to/image-file
---
```
+### Image caption
+
+Add italics to the next line of an imageļ¼then it will become the caption and appear at the bottom of the image:
+
+```markdown
+
+_Image Caption_
+```
+
+### Image size
+
+You can specify the width (and height) of a image with `width`:
+
+```markdown
+{: width="400"}
+```
+
+### Image position
+
+By default, the image is centered, but you can specify the position by using one of class `normal` , `left` and `right`. For example:
+
+- **Normal position**
+
+ Image will be left aligned in below sample:
+
+ ```markdown
+ {: width="350" class="normal"}
+ ```
+
+- **Float to the left**
+
+ ```markdown
+ {: width="240" class="left"}
+ ```
+
+- **Float to the right**
+
+ ```markdown
+ {: width="240" class="right"}
+ ```
+
+> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+
## Pinned Posts
You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by: