Introduce the mermaid in docs
This commit is contained in:
Cotes Chung
parent
4d2f13c0d7
commit
d196645d88
|
|
@ -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 data-toc-skip>H2 - heading</h2>
|
||||
|
||||
<h2 data-toc-skip>H2</h2>
|
||||
|
||||
<h3 data-toc-skip>H3</h3>
|
||||
|
||||
<h4>H4</h4>
|
||||
<h3 data-toc-skip>H3 - heading</h3>
|
||||
|
||||
<h4>H4 - heading</h4>
|
||||
---
|
||||
<br>
|
||||
|
||||
## 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:
|
||||
<br>
|
||||
|
||||
- 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:
|
||||
<br>
|
||||
|
||||
- Normal position
|
||||
|
||||
{: width="350" class="normal"}
|
||||
- Left aligned
|
||||
|
||||
- Float to the left
|
||||
{: width="350" class="normal"}
|
||||
|
||||
<br>
|
||||
|
||||
- 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
|
||||
<br>
|
||||
|
||||
- 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."
|
||||
|
||||
<br>
|
||||
|
||||
## 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`.
|
||||
|
|
|
|||
|
|
@ -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 <code class="language-plaintext highlighter-rouge">```mermaid</code>
|
||||
and <code class="language-plaintext highlighter-rouge">```</code>.
|
||||
|
||||
## 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:
|
||||
|
|
|
|||
Loading…
Reference in New Issue