asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

Introduce the mermaid in docs

Browse source
This commit is contained in:
Cotes Chung 2020-12-10 06:39:03 +08:00
parent 4d2f13c0d7
commit d196645d88
2 changed files with 91 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
_posts/2019-08-08-text-and-typography.md
View file

@ -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)
![Desktop View](/assets/img/sample/mockup.png)
_Full screen width and center alignment_
You can change the size of the picture:
<br>
- Specify width
![Desktop View](/assets/img/sample/mockup.png){: 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
![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
- Left aligned
- Float to the left
![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
<br>
- Float to left
![Desktop View](/assets/img/sample/mockup.png){: 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
![Desktop View](/assets/img/sample/mockup.png){: 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`.

60
_posts/2019-08-08-write-a-new-post.md
View file

@ -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
![img-description](/path/to/image)
_Image Caption_
```
### Image size
You can specify the width (and height) of a image with `width`:
```markdown
![Desktop View](/assets/img/sample/mockup.png){: 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
![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
```
- **Float to the left**
```markdown
![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
```
- **Float to the right**
```markdown
![Desktop View](/assets/img/sample/mockup.png){: 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: