Markdown基础教程

方便自己以后使用，一次性总结到自己的post里,大部分出自这里，自己也修改补充了一些，基于butterfly主题更多的功能可以去butterfly官网了解查看哦~

基础语法

标题

Markdown支持6种级别的标题，对应html标签h1~h6

• 方法一

# h1
## h2
### h3
#### h4
##### h5
###### h6

以上标记效果如下

---

h1

h2

h3

h4

h5

h6

---

• 方法二

这是一级标题
===
这是二级标题
---

以上标记效果如上h1/h2

段落及区块引用

需要记住的是，Markdown其实就是一种易于编写的普通文本，只不过加入了部分渲染文本的标签而已。其最终依然会转换为html标签，因此使用Markdown分段非常简单，前后至少保留一个空行即可。
而另外一个比较常见的需求就是，我们可能希望对某段文字进行强调处理。Markdown提供了一个特殊符号>用于段首进行强调，被强调的文字部分将会高亮显示：

> 这段文字将被高亮显示...

以上标记效果如下

这段文字将被高亮显示…

插入链接或图片

Markdown针对链接和图片的处理也比较简单，可以使用下面的语法进行标记：

[点击跳转至百度](http://www.baidu.com)
![图片](https://picsum.photos/id/1008/5616/3744)

以上标记效果如下

点击跳转至百度

注： 引用图片和链接的唯一区别就是在最前方添加一个感叹号。基于butterfly主题，将config.butterfly.yml中的photofigcaption改为true就可以添加图片下面的注释啦。

列表

Markdown支持有序列表和无序列表两种形式：

• 无序列表使用 * 或 + 或 - 标识
• 有序列表使用数字加.标识

* 黄瓜
* 玉米
* 茄子

+ 黄瓜
+ 玉米
+ 茄子

- 黄瓜
- 玉米
- 茄子

1. 黄瓜
2. 玉米
3. 茄子

以上标记效果如下

• 黄瓜
• 玉米
• 茄子

• 黄瓜
• 玉米
• 茄子

• 黄瓜
• 玉米
• 茄子

1. 黄瓜
2. 玉米
3. 茄子

注：这里比较有趣的地方是，对于有序列表，Markdown将只关注你的第一个项目的数字编号。例如：如果第一个项目编号是3，以此类推，第二个项目应该是4，最终将显示为3、4、5。而如果你指定了第一个编号，后面的编号指定错误也没有关系，Markdown将只在乎你的第一个项目编号。

使用列表的一些注意事项

如果在单一列表项中包含了多个段落，为了保证渲染正常，* 与段落首字母之间必须保留四个空格：

*    段落一

     小段一
*    段落二

     小段二

以上标记效果如下

• 段落一

  小段一

• 段落二

  小段二

另外，如果在列表中加入了区块引用，区域引用标记符也需要缩进4个空格：

* 段落一
    > 区块标记一
* 段落二
    > 区块标记二

以上标记效果如下

• 段落一

  区块标记一

• 段落二

  区块标记二

注：记住一个原则，如果在和列表配合使用的时候出现了问题，就缩进一次，四个空格或者一个制表符代表一次缩进。如果一次缩进没有解决问题，那就两次。

分割线

有时候，为了排版漂亮，可能会加入分隔线。Markdown加入分隔线非常简单，使用下面任意一种形式都可以：

***
---

以上标记效果如下

---

---

注：产生分隔线的语法要求比较松，符号之间添加空格也可以。

强调

有时候，我们希望对某一部分文字进行强调，使用 * 或 _ 包裹即可。使用单一符号标记的效果是斜体，使用两个符号标记的效果是加粗：

*这里是斜体*
_这里是斜体_

**这里是加粗**
__这里是加粗__

以上标记效果如下

这里是斜体
这里是斜体

这里是加粗
这里是加粗

加入代码块

正常加入代码块

```[代码语言]
此处为代码
```

前面的小点点就是键盘左上方的带个~的那个，英文状态下打出来

```Markdown
此处为代码
```

以上标记效果如下

此处为代码

文字中加入代码块

在要标记代码块的字符串前后加一个`

这是一段文字`demo`

以上标记效果如下

这是一段文字demo

高级用法

插入表格

表格是Markdown语法中比较复杂的一个，其语法如下：

表头|条目一|条目二
:---:|:---:|:---:
项目|项目一|项目二

以上标记效果如下

表头	条目一	条目二
项目	项目一	项目二

注：三个短斜杠左右的冒号用于控制对齐方式，只放置左边冒号表示文字居左，只放置右边冒号表示文字居右，如果两边都放置冒号表示文字居中。

其它

特殊符号处理

Markdown使用反斜杠\插入语法中用到的特殊符号。在Markdown中，主要有以下几种特殊符号需要处理：

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

例如，如果你需要插入反斜杠，就连续输入两个反斜杠即可：\ => \ 。

注：在内容中输入以上特殊符号的时候一定要注意转义，否则将导致内容显示不全，甚至排版混乱。

butterfly主题文字底纹

使用Markdown的同学最郁闷的地方恐怕就是不能给文字添加颜色了。事实上，Markdown的最初目标就是为纯写作而生的。因此，它并没有考虑文字颜色这一点。所以，单纯使用Markdown设置文字颜色已经做不到了。

但是butterfly主题有添加文字底纹这个高级功能：

{% label text color %}
//{% label 文本 blue/purple/pink/red/orange/green %}

以上标记效果如下

• blue
• purple
• pink
• red
• orange
• green

文本

文本

文本

文本

文本

文本

butterfly主题文字颜色更改

<font color="red">红色</font>
<font color="green">绿色</font>
<font color="blue">蓝</font>

以上标记效果如下

红色
绿色
蓝

butterfly主题文字框

像我post里频繁出现的前面带小对号、小叹号的彩色框框就是用了这个功能：

{% note [class] [no-icon] [simple] %}
任何内容
{% endnote %}

名称	用法和参数
class	【选填】图标样式可用这几种：default/primary/success/info/warning
no-icon	【选填】它不显示图标，只显示对应的颜色
style	【可选】标签风格可用这几种：simple/modern/flat/disabled

{% note success simple %}
以上标记效果就是这儿
{% endnote %}

以上标记效果就是这儿

butterfly主题隐藏标签

butterfly主题共推出了三种模式inline/Block/Toggle

inline

只能隐藏文字内容：

{% hideInline content,display,bg,color %}
//{% hideInline 隐藏文字内容,按钮显示文字,按钮背景颜色,按钮字体颜色 %}
//示例：{% hideInline 宇宙的尽头,我的家乡,bg,color %}

以上标记效果如下

我的家乡 宇宙的尽头

注：display/bg/color可选填，颜色种类与字体颜色种类同文字底纹，不改则默认为Click/蓝色/白色。

Block

可以隐藏文字、图片、代码块等较多内容：

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

{% hideBlock 戳戳我,bg,color %}
Hello！我是文字
![Hello!我是图片](https://picsum.photos/id/1006/3000/2000)
{% endhideBlock %}

以上标记效果如下

戳戳我

Hello！我是文字

Toggle

更像是折叠栏，与Block很像，可以折叠较多内容：

{% hideToggle display,bg,color %}
content
{% endhideToggle %}

{% hideToggle 我是折叠栏,bg,color %}
Hello！我是文字
![Hello!我是图片](https://picsum.photos/id/1006/3000/2000)
{% endhideToggle %}

以上标记效果如下

我是折叠栏

Hello！我是文字

持续更新更多…