Markdown 基础语法笔记

Markdown 是一种轻量级标记语言, 它允许使用易读易写的纯文本格式编写文档.
Markdown 文件的后缀名是 .md
使用 Hexo 编写博客时使用的就是 Markdown.
不同的 Markdown 解析器对于 Markdown 的支持程度不同, 也就有了所谓的 Markdown 方言

标题

语法 HTML 预览效果
# Heading level 1 <h1>Heading level 1</h1>

Heading level 1
Heading level 1
===============		 <h1>Heading level 1</h1>

Heading level 1
## Heading level 2 <h2>Heading level 2</h2>

Heading level 2
Heading level 2
—————		 <h1>Heading level 2</h1>

Heading level 2
### Heading level 3 <h3>Heading level 3</h3>

Heading level 3
#### Heading level 4 <h4>Heading level 4</h4>

Heading level 4
##### Heading level 5 <h5>Heading level 5</h5>

Heading level 5
###### Heading level 6 <h6>Heading level 6</h6>

Heading level 6
###### Head { #id } <h6 id="id">Heading</h6>

Head

段落

使用空白行分隔段落

语法 HTML 预览效果
段落一

段落二		 <p>段落一</p><p>段落二</p>

段落一

段落二

换行

使用<br>或两个空格实现换行

强调

粗体

使用 ** 或 __ 包裹需要变成粗体的文字, 注意: __ 前必须有空格, 而 ** 不必有

语法 HTML 预览效果
这是**粗体** 这是<strong>粗体</strong> 这是粗体
这是__粗体__ 这是<strong>粗体</strong> 这是粗体

斜体

使用 * 或 _ 包裹需要变成斜体的文字, 注意: _ 前必须有空格, 而 * 不必有

语法 HTML 预览效果
这是*斜体* 这是<em>斜体</em> 这是斜体
这是__斜体__ 这是<em>斜体</em> 这是斜体

删除线

使用 ~~ 包裹需删除的文字

语法 HTML 预览效果
这是要~~删除~~的内容 这是要<s>删除</s>的内容 这是要删除的内容

引用

在段落前添加 > 创建引用块, > 的数量是嵌套的层数

语法 HTML 预览效果
> 这里是引用段落 <blockquote>这里是引用段落</blockquote>
这里是引用段落
> 这里是引用段落的引用段落 <blockquote>这里是引用段落<blockquote>这里是引用段落引用段落</blockquote></blockquote>
这里是引用段落
这里是引用段落引用段落

列表

有序列表

语法 HTML 预览效果
1. First item
2. Second item
3. Third item
4. Fourth item		 <ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
1. Second item
1. Third item
1. Fourth item		 <ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
3. Second item
5. Third item
7. Fourth item		 <ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
1. Second item
▯▯▯▯1.Indented item
▯▯▯▯1.Indented item
1. Third item
1. Fourth item		 <ol>
<li>First item</li>
<li>Second item</li>
<li>Third item<ol>
<li>Indented item</li>
<li>Indented item</li>
</ol>
</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item

无序列表

要在保留列表连续性的同时在列表中添加另一种元素, 请将该元素缩进四个空格或一个制表符
代码块通常采用四个空格或一个制表符缩进. 当它们被放在列表中时, 请将它们缩进八个空格或两个制表符

语法 HTML 预览效果
- First item
- Second item
- Third item
- Fourth item		 <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
  • First item
  • Second item
  • Third item
  • Fourth item
* First item
* Second item
* Third item
* Fourth item		 <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
  • First item
  • Second item
  • Third item
  • Fourth item
+ First item
+ Second item
+ Third item
+ Fourth item		 <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
  • First item
  • Second item
  • Third item
  • Fourth item
_ First item
_ Second item
▯▯_ Indented item
▯▯_ Indented item
_ Third item
_ Fourth item		 <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item<ul>
<li>Indented item</li>
<li>Indented item</li>
</ul>
</li>
<li>Fourth item</li>
</ul>
  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item

任务列表

带有复选框的项目列表
语法为:

1
2
3
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

效果为:

  • Write the press release
  • Update the website
  • Contact the media

代码块

行内代码块

用 ` 或 `` 在一行内包裹一句代码, 代码中若出现则用 `` 包裹代码块

语法 HTML 预览效果
输出 `Hello` 用 Python 实现为: print(‘`hello`‘) 输出 \`Hello\` 用 Python 实现为: <code>print('`hello`')</code> 输出 `Hello` 用 Python 实现为: print('`hello`')

跨行代码块

将代码块的每一行缩进至少四个空格或一个制表符, 或使用 ```(language) 包裹代码块

语法 HTML 预览效果
print(‘hello’)
print(‘world’)		 取决于解析器 print('hello')
print('world')

分隔线

在单独一行上使用三个或多个 * , -, _ ，并且不能包含其他内容. 为了兼容性，请在分隔线的前后均添加空白行.

语法 HTML 预览效果
--- 或 ___ 或 *** <tr>

链接

普通链接

语法 HTML 预览效果
[链接名称](链接地址) <a href='链接地址'>链接名称</a> Patrick’s blog
<链接地址> <a href='链接地址'>链接地址</a> https://patrick-0079.github.io/

引用类型链接

语法为 [链接名称][引用序号], 然后将 [引用序号]: 链接地址 放在之后的段落中, 例如
Patrick’s blog

图片链接

语法为 ![图片alt](图片链接 “图片title”), 对应的 HTML 为 <img src="图片链接" alt="图片alt" title="图片title">, 例如:

Patrick

转义字符

Markdown中的特殊字符可通过在其前面加 \ 转义

内联 HTML

在需要内联的 HTML 块前后加空白行

表格

语法:

1
2
3
4
| 表头1  | 表头2  |  表头3 | 表头4  |
| ------ | :----- | -----: | :----: |
| 1行1列 | 1行2列 | 1行3列 | 1行3列 |
| 2行1列 | 2行2列 | 2行3列 | 2行3列 |

其中 — 意为默认对齐, :— 意为左对齐, —: 意为右对齐, :—: 意为居中对齐

脚注

语法为 [^角标文字], 然后将 [角标文字]: 解释内容 放在之后的段落中, 例如 Patrick’s blog^1

列表

用法为

1
2
3
4
5
6
First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

所生成的 HTML 为:

1
2
3
4
5
6
7
<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

所呈现效果为:
First Term
▯▯This is the definition of the first term.
Second Term
▯▯This is one definition of the second term.
▯▯This is another definition of the second term.

Emoji

直接使用通过键入表情符号短代码来插入表情符号
例如:

:joy: -> 😂

butterfly支持标籤

作者: Jerry
连结: https://butterfly.js.org/
来源: Butterfly

逗号用 &sbquo; 代替

便籤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note simple %}
默认 提示块标籤
{% endnote %}

{% note default simple %}
default 提示块标籤
{% endnote %}

{% note primary simple %}
primary 提示块标籤
{% endnote %}

{% note success simple %}
success 提示块标籤
{% endnote %}

{% note info simple %}
info 提示块标籤
{% endnote %}

{% note warning simple %}
warning 提示块标籤
{% endnote %}

{% note danger simple %}
danger 提示块标籤
{% endnote %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

tag-hide

Inline

content, 例如 
1
2
3
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人? {% hideInline 闪 %}

哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人? 闪

Block

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)
    例如
    1
    2
    3
    4
    查看答案
    {% hideBlock 查看答案 %}
    傻子，怎么可能有答案
    {% endhideBlock %}
    查看答案

    傻子，怎么可能有答案

Toggle

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

例如

1
2
3
4
5
6
7
8
9
10
{% hideToggle Butterfly安装方法 %}
在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}
Butterfly安装方法

在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

mermaid

使用mermaid标籤可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图）

1
2
3
{% mermaid %}
内容
{% endmermaid %}

mermaid文档

Tabs

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% 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 (full-name, look like 'fas fa-font')
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1, 2 %}
<!-- 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.

Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景颜色(默认style时）
                      按钮字体和边框颜色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮布局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

inlineImg

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    图片链接
[height]   ：   图片高度限制【可选】

label

1
2
{% label text color %}
color: default/blue/pink/red/purple/orange/green

例如
{% label text blue %}text

timeline

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

例如

1
2
3
4
5
{% timeline 2022 %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

这是测试页面

友链

1
2
3
{% flink %}
link.yml内容
{% endflink %}
Markdown 相关文档
Markdown Documentation
Markdown Documentation
Markdown 官方教程
Butterfly theme 文档
Butterfly theme 文档
Butterfly theme 官方博客