Markdown Tutorial

Posted on 2019-06-12 Edited on 2022-02-15 In Tech , Web , Markdown Symbols count in article: 29k Reading time ≈ 27 mins.

Markdown 概述

简介

Markdown 是一种轻量级标记语言, 创始人为约翰·格鲁伯(英语: John Gruber). 它允许人们“使用易读易写的纯文本格式编写文档, 然后转换成有效的XHTML(或者 HTML)文档”. 这种语言吸收了很多在电子邮件中已有的纯文本标记的特性.

由于 Markdown 的轻量化, 易读易写特性, 并且对于图片, 图表, 数学式都有支持, 当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息. 例如: GitHub, reddit, Diaspora, Stack Exchange, OpenStreetMap, SourceForge 等. 甚至 Markdown 能被使用来撰写电子书.

优点

专注文字内容而不是排版样式, 降低写作成本, 提高写作效率.
轻松的导出 HTML, PDF 和本身的 .md 文件.
纯文本内容, 兼容所有的文本编辑器与字处理软件.
可读, 直观, 学习成本低.
随时修改文章版本, 不必像字处理软件生成若干文件版本导致混乱.
- 可以通过 Git 方便控制版本.

Markdown 资料

官方文档

创始人 John Gruber 的 Markdown 语法说明

中文技术文档的写作规范

当使用系统关键字时, 以关键字+空格的形式, 不仅方便阅读, 也方便编辑.

Markdown 排版

标题

# 一级标题
## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

一级标题
========
二级标题
---------

列表

无序列表, 可以将内容缩进, 达成子列表效果.

* 列表内容.
- 列表内容.
+ 列表内容.
*Tab*, 可以在无序列表中缩进.

HTML: 无序列表

1
2
3

<ul>
<li>列表内容.</li>
</ul>

有序列表

1 2	Num. 列表内容. Tab, 可以在有序列表中缩进.

HTML: 有序列表

1
2
3

<ol>
<li>列表内容.</li>
</ol>

列表的高级应用

Task List

1 2	- [ ] 未完成 - [x] 已完成

Example

未完成
已完成

HTML

1 2	<input type="checkbox"> 未完成 <br> <input type="checkbox" checked> 已完成 <br>

Example
未完成

已完成

分割线

1
2
3

---
***
___

链接, 图片, 和内部跳转

Hyperlink

1 2	通过在文字后直接插入url实现 [文字内容](url)

1 2	[文字内容][id] [id]: url

超链接(英语：Hyperlink)是指超文本内由一文件连接至另一文件的链接. 作用与论文中的参考或注释类似, 以方便读者随时参考某一词汇的定义.

图片

通过在图片名(可以为空)后插入url实现插入图片
![图片名](url)

为图片添加隐藏式备注(需要鼠标放在上面才显示)
![图片名](url "Optional Title")

为图片添加题注
![图片名](url)
<center>题注</center>

1
2
3

通过在图片名(可以为空)后插入id, 再在id后插入url实现规范正文格式
![图片名][id]
[id]: url "Optional Title"

Without Alt & Title

1	![](https://raw.githubusercontent.com/ZacksAmber/PicGo/master/img/Einstein.jpg)

With Alt & Title

1	![Einstein](https://raw.githubusercontent.com/ZacksAmber/PicGo/master/img/Einstein.jpg "This is Einstein")

Einstein

调整图片大小

<img src="https://raw.githubusercontent.com/ZacksAmber/PicGo/master/img/Einstein.jpg" width=210 height=100 />

img src: 图片url
width: 宽度
height: 高度

根据比例调整图片大小

<img src="https://raw.githubusercontent.com/ZacksAmber/PicGo/master/img/Einstein.jpg" width=210 height=100 />

img src: 图片url
width: 宽度
height: 高度

调整图片位置

{% img [class names] /path/to/image [width] [height] "title text 'alt text'" %}

<center>
<img src="https://raw.githubusercontent.com/ZacksAmber/PicGo/master/img/Einstein.jpg" width=210 height=100 />
</center>

img src: 图片url
width: 宽度
height: 高度
<center> ... </center> 居中标签

Einstein

<img src="https://raw.githubusercontent.com/ZacksAmber/PicGo/master/img/Einstein.jpg" width="50%" height="50%" div align = "center" />

img src: 图片url
width: 宽度
height: 高度
div align: 调整位置, 可以选择 center, right, left

Group Pictures

https://theme-next.js.org/docs/tag-plugins/group-pictures.html

{% gp 1-1 %}
![](https://raw.githubusercontent.com/ZacksAmber/PicGo/master/img/20210707102150.png)
![](https://raw.githubusercontent.com/ZacksAmber/PicGo/master/img/20210707102319.png)
{% endgp %}

内部跳转(通过标题)

需要跳转的章节
<h2 id = "id"> 标题名 </h2>
(空一行)
内容

1 2	需要插入内部链接的内容 [文字内容](#id)

MarkDown不支持自定义跳转, 因此通过html的形式实现
P.S: h2 是二级标题, 相当于 ##, 以此类推, h3 相当于 ###.

Example
点击此处跳转到下一章第一节“代码块”

1	点击此处跳转到下一章第一节["代码块"](#code-block)

Markdown Content

Code Block

Code in Line

1	This is a `code in line`.

This is a code in line.

Code block

```*Language*
This is code block
```

Example

Python

1
2
3

import numpy py

print("Hello World")

1	This is code block

``` [language] [title] [url] [link text] code snippet ```

Title

```*Language* *Title*
Code
```

Python For loop

1 2	for i in range (0, 3): print(i)

Show line-number

```Language {.lines-number}
Code Block
```

{.lines-number}

1
2
3

This is 1st line
This is 2nd line
This is 3rd line

Highlight specific line (Do not work in Hexo)

```Language {highlight=[1-10,15,20-22]}
Code
```

{.highlight

for i in range (0, 3):
    print(i)
"""
0
1
2
"""

for i in range (3):
    print(i)
"""
0
1
2
"""

for i in range (2, 6):
    print(i)
"""
2
3
4
5
"""

HTML

1
2
3

<pre><code>
Code Block
</code></pre>


Code Block

HTML

1	<code>Code inline</code>

Code inline

字体外观

*斜体*, _斜体_
<u>下划线</u>
**粗体**, __粗体__
~~删除线~~
==标记==
上^标^
下~标~

备注

Hexo plug: npm install markdown-it-footnote –save

脚注的注意事项

带id的脚注是和带id的reference共用id的, 因此不可设置成一样的id, 否则会冲突.
- 详见Hyperlink
脚注无论放在哪, 在预览时都会固定跳转到页面底部.

Example of footnote

HK^[99]

缩略词

1	*[缩略词]: 悬浮显示, 不可跳转, 无id.

Example of abbreviation
The HTML specification is maintained by the W3C.
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

1
2
3

The HTML specification is maintained by the W3C.
*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

引用

> 引用内容

插入超链接引用, 见hyperlink 第二部分

转义

通常使用 \ 转义系统关键字, 还可以使用代码块来转义大段内容; 特殊情况下可以使用 Note 来转义内容.

\系统关键字

需要转义的内容

1
2
3

<html block>
以具体 html 语法为准
<\html block>

1
2
3

{% note %}
以具体 note 语法为准
{% endnote %}

需要转义的内容

\
`
*
_
{}
[]
()
#
+
-
.
!

Markdown 表格

表头和单元格

分隔符

分隔列: |
分隔表头: -
- - 可以复数个.
- 为了方便阅读, | 和 - 之间使用空格分开.

对齐

左对齐: :-, -
中间对齐: :-:
右对齐: -:

|Left|Middle|Right|
| -  | :--: | -:  |
|aaa | bbbb | cccc|
|a   |b     |c    |

Left	Middle	Right
aaa	bbbb	cccc
a	b	c

HTML 表格

HTML 表格
P.S: 适用于Markdown表格无法转义的一些特殊字符, 比如|
也可以使用|来代替|, 以免出现bug

表格开头不能有 tab 或 space
每个表格由 table 标签开始
每个表格行由 tr 标签开始
每个表格数据由 td 标签开始
每个表头由 th 定义
- 大多数浏览器会把表头显示为粗体居中的文本
使用 &nhsp 作为占位符可以显示空表格
使用<div></div>包含整个表格来定义全局
- 使用style="text-align:center", or left, or right 来定义表格全局排版

HTML Table Example

<div style='text-align:left'>
<table border="1">
<caption>My table</caption>
<tr>
<th>Heading1</th>
<th>Heading2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Not null</td>
</tr>
</table>
</div>

My table
Heading1	Heading2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2
	Not null

Markdown 数学

Web用户可能需要额外插件
LATEX：玩转数学公式 by Leahlijuan
List of Greek letters and math symbols by Overleaf
Markdown 中 LaTeX 数学公式命令 by Kiven

1
2
3

$Math$

$f(x) = sinx$

$f(x) = sinx$

1
2
3

$$Math Block$$

$$f(x) = sinx$$

$$f(x) = sinx$$

HTML

Tag Plugins

Image

{% fullimage /url [@lazy], [alt], [title], [size] %}
<!-- Tag Alias -->
{% fi /url [@lazy], [alt], [title], [size] %}

/url    : Relative path to image URL.
[@lazy] : Load image only when user scroll to it.
          Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
[alt]   : Alternate text (for search engines).
[title] : Tooltip at mouseover.
[size]  : Size of image in any ratio (%, px, em).

All parameters except /url are optional.

Full Image

Full Image with alt & title

Full Image with 100% size

Full Image with 200px & without alt & title

论文

字体

样式

1
2
3

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>

Example
我是黑体字
我是微软雅黑
我是华文彩云

颜色

HTML Color Code

1
2
3

<font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"</font>
<font color=#00ffff size=4>color=#00ffff</font>
<font color=gray size=2>color=gray</font>

Example
color=#0099ff size=72 face=”黑体”
color=#00ffff
color=gray

大小

大小范围1~7, 默认3

1 2	size 3 <font size = 5>size 5</font>

Example
size 3
size 5

强制分页(仅在导出pdf时生效)

1	<div style="page-break-after: always;"></div>

NexT Plugins

https://mist.theme-next.org/docs/tag-plugins/

Note: This chapter is only for Hexo NexT user.

Note

# Note tag style values:
#  - simple    bs-callout old alert style. Default.
#  - modern    bs-callout new (v2-v3) alert style.
#  - flat      flat callout style with background, like on Mozilla or StackOverflow.
#  - disabled  disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

Note Example

1	{% note danger %}It's wrong to write this tag with 1 line if you don't want to see possible bugs.{% endnote %}

Note Class

1 2	[class] : default \| primary \| success \| info \| warning \| danger. [no-icon] : Disable icon in note.

(without define class style)

{% note %}
#### Header

(without define class style)
{% endnote %}

Default Header

Welcome to Hexo!

{% note default %}
#### Default Header

Welcome to [Hexo!](https://hexo.io)
{% endnote %}

Primary Header

Welcome to Hexo!

{% note primary %}
#### Primary Header

**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Info Header

Welcome to Hexo!

{% note info %}
#### Info Header

**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Success Header

Welcome to Hexo!

{% note success %}
#### Success Header

**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Warning Header

Welcome to Hexo!

{% note warning %}
#### Warning Header

**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Danger Header

Welcome to Hexo!

{% note danger %}
#### Danger Header

**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

No icon note

Note without icon: note info no-icon

1
2
3

code block in note tag
code block in note tag
code block in note tag

{% note info no-icon %}
#### No icon note

Note **without** icon: `note info no-icon`
{% code %}
code block in note tag
code block in note tag
code block in note tag
{% endcode %}
{% endnote %}

Codeblock in note

1
2
3

code block in note tag
code block in note tag
code block in note tag

{% note success %}
#### Codeblock in note

{% code %}
code block in note tag
code block in note tag
code block in note tag
{% endcode %}
{% endnote %}

Lists in note

ul
ul
- ul
- ul
ul

{% note default %}
#### Lists in note

* ul
* ul
  * ul
  * ul
* ul

1. ol
2. ol
  1. ol
  2. ol
3. ol
{% endnote %}

Table in Note

1	2
3	4
5	6
7	8

#### Table in Note

{% note default %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}

Tabs

Settings

/_config.yml -> theme_config:

tabs:
  transition:
    tabs: false
    labels: true

Usage

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (without 'fa-' at the begining).
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

Tabs

{% tabs First unique name %}
<!-- tab -->
This is Tab 1.
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
*This is Tab 3.*
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Selected Tabs

Tabs with 3rd tab selected

{% tabs Second unique name, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% tabs Third unique name, -1 %}
<!-- tab -->
**Tabs with no tab selected**
<!-- endtab -->

<!-- tab -->
**Tabs with no tab selected**
<!-- endtab -->

<!-- tab -->
**Tabs with no tab selected**
<!-- endtab -->
{% endtabs %}

Tabs with no tab selected

Tabs with custom labels

{% tabs Fourth unique name %}
<!-- tab Solution 1 -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab Solution 2 -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab Solution 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Tabs with icons

{% tabs Fifth unique name %}
<!-- tab @text-width -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab @amazon -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab @bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tabs with icons only

This is Tab 1.

This is Tab 2.

This is Tab 3.

Tabs with icons and labels
{% tabs Sixth unique name %}
<!-- tab Solution 1@text-width -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab Solution 2@amazon -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab Solution 3@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tabs with icons and labels

This is Tab 1.

This is Tab 2.

This is Tab 3.

Tabs permalinks test

Permalink for > [Tab one](#tab-one).
Permalink for > [Tab one 1](#tab-one-1).
Permalink for > [Tab one 2](#tab-one-2).
Permalink for > [Tab one 3](#tab-one-3).

Permalink for > [Tab two](#tab-two).
Permalink for > [Tab two 1](#tab-two-1).
Permalink for > [Tab two 2](#tab-two-2).
Permalink for > [Tab two 3](#tab-two-3).

{% tabs Tab one %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

{% tabs Tab two %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tabs permalinks test
Permalink for > Tab one.
Permalink for > Tab one 1.
Permalink for > Tab one 2.
Permalink for > Tab one 3.

Permalink for > Tab two.
Permalink for > Tab two 1.
Permalink for > Tab two 2.
Permalink for > Tab two 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

Tabs with other tags

{% tabs Tags %}
<!-- tab -->
**This is Tab 1.**

1. One
2. Two
3. Three

4-spaces code block:

    nano /etc

Tagged code block:

{% code %}
code tag
code tag
code tag
{% endcode %}

{% note default %}
Note default tag.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**

* Five
* Six
* Seven

{% note primary %}
{% youtube Kt7u5kr_P5o %}
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**

{% subtabs Sub Tabs %}
<!-- tab -->
**This is Sub Tab 1.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
{% endnote %}

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub Tab 2.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

{% note danger %}
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub Tab 3.**

{% subtabs Sub-Sub Tabs %}
<!-- tab -->
**This is Sub-Sub Tab 1 of Sub Tab 3.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub-Sub Tab 2 of Sub Tab 3.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}

{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub-Sub Tab 3 of Sub Tab 3.**

{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

{% note warning %}
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

{% note danger %}
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
{% endnote %}

{% endnote %}

{% endnote %}
<!-- endtab -->
{% endsubtabs %}

<!-- endtab -->
{% endsubtabs %}

<!-- endtab -->
{% endtabs %}

Tabs with other tags

This is Tab 1.

One
Two
Three

4-spaces code block:

nano /etc

Tagged code block:

1
2
3

code tag
code tag
code tag

Note default tag.

This is Tab 2.

Five
Six
Seven

This is Tab 3.

This is Sub Tab 1.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

This is Sub Tab 2.

This is Sub Tab 3.

This is Sub-Sub Tab 1 of Sub Tab 3.

This is Sub-Sub Tab 2 of Sub Tab 3.

This is Sub-Sub Tab 3 of Sub Tab 3.

PDF

Settings

/_config.yml -> theme_config

pdf:
  enable: true
  # Default height
  height: 500px

Usages

pdf:
  enable: true
  # Default height
  height: 500px
  pdfobject:
    # Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

Mermaid

https://github.com/mermaid-js/mermaid

Settings

/_config.yml -> theme_config

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

Usage

mermaid.js

{% mermaid type %}
{% endmermaid %}

type : type of the mermaid chart, visit https://github.com/knsv/mermaid for more information.

graph
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Button

{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

url     : Absolute or relative path to URL.
text    : Button text. Required if no icon specified.
icon    : FontAwesome icon name (without 'fa-' at the begining). Required if no text specified.
[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
          Optional parameter.
[title] : Tooltip at mouseover.
          Optional parameter.

Label (高亮)

Using <mark>Text</mark> as default markdown label.

{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.
          '@Text' can be specified with or without space
          E.g. 'success @text' similar to 'success@text'.
          If not specified, default class will be selected.

<mark>This is important content needed to be heighlight</mark>

Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is important content needed to be heighlight
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~velit~~ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Video

1	{% video url %}

Example

1	{% youtube 9f6MdHPG_64 %}

Reference

99.光复香港, 时代革命. ↩