Markdown从入门到进阶

作业部落旗下 Cmd 在线 Markdown 编辑阅读器工具推荐 传送门

Markdow简介

Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档，譬如您正在阅读的这份文档，便是使用Markdown书写的一篇教程。底层理解：在页面显示时使用HTML+CSS+JavaScript对Markdow的标签进行渲染显示。

入门基础篇

基础篇的语法标签市面上Markdown编辑器基本都全部支持，那么接下来就让我们开始学习吧！

斜体和粗体

说明：对文章文本进行加粗或斜体化显示。

语法：

语法规则
*斜体内容* 
**粗体内容**

删除线

语法：

语法规则
~~需要删除的文本内容~~

分级标题

说明：用于文章的标题突出显示，类似HTML标签语言中的h1~h6标签的功能。

语法：

传统语法
# 标题一
## 标题二
### 标题三
#### 标题四
##### 标题五

扩展
一级标题 等于号个数不限制，放在标题下面
==================================

二级标题 减号个数不限 放在标题下面
----------------------------------

无序列表

语法：

使用 * + - 表示无序
* 无序列表一
+ 无序列表二
- 无序列表三

有序列表

语法：

语法规则
数字. 文本内容

示例
1. 有序列表一
2. 有序列表二

文字引用

语法：

语法规则
> 文本内容

示例
> 人无远虑，必有近忧！

行内代码块

语法：

语法规则
`文本内容`

示例
`Java` `C++`

代码块

语法：

使用四个缩进空格表示代码块
    这是代码块

加强的代码块

说明：支持四十一种编程语言的语法高亮的显示，行号显示。

语法：

添加语言表示某语言代码示例，为空则表示非代码示例
```语言或空
    代码内容
```

非代码示例：
```
    echo "Hello Markdown!"
```

代码示例：
```C++
#include<iostream>
int main(int argc, char* argv[])
{
    std::cout << "Hello, Markdown!";
    return 0;
}
```

表格

语法：

左对齐         右对齐   居中对齐
| 项目       | 价格   |  数量  |
| ------   | -----: | :----: |
| 计算机     | $1600  |   5    |
| 手机       | $12    |   12   |
| 管线       | $1     |  234   |

外链接

说明：为文章内容某些字段添加外链接，可以点击访问远程服务。

语法：

语法规则
[描述](外链接地址或预定义关键字)

使用方法一
[百度一下](https://www.baidu.com)

使用方法二(使用预定义)
[1]: http://blog.thou.cc
[baidu]: https://baidu.com
[我的博客][1]
[百度两下][baidu]

插入图片

语法：

语法规则
![描述](本地文件路径或外链接地址)

本地路径示例 （在网络上无法正常显示 此处不做演示）
![独角兽](./unicorn.png)

外链接示例
![独角兽](https://r.thou.cc/static/images/cnblogs/unicorn.png)

入门中级篇

生成目录

语法：

在段落中填写 [TOC] 显示全文内容的目录结构，一般写在文章开头

标签分类

语法：

在编辑区任意行的列首位置输入以下代码给文稿标签：
标签： 数学 英语 Markdown
或
Tags： 数学 英语 Markdown

注：文章中只能出现一次

注脚

语法：

语法规则
[^keyword]

示例
注脚[^great]
[^great]: 这是一个伟大的时代！

定义型列表

语法规则
名词
:   定义（左侧有一个可见的冒号和四个不可见的空格）

代码块
:   代码块定义（左侧有一个可见的冒号和四个不可见的空格）

        代码块代码（左侧有八个不可见的空格）

Html 标签

说明：支持在 Markdown 语法中嵌套 Html 标签，譬如，你可以用 Html 写一个纵跨两行的表格：

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>李强</td>
        <td>张明</td>
        <td>王平</td>
    </tr>
</table>

显示效果：

值班人员	星期一	星期二	星期三
	李强	张明	王平

Todo 列表

使用带有 [ ] 或 [x]（未完成或已完成）项的列表语法撰写一个待办事宜列表，并且支持子列表嵌套以及混用Markdown语法，例如：

- [ ] 未完成任务
- [x] 已完成任务

LaTeX 公式

说明：对数学等公式支持渲染显示。

语法：

$ 表示行内公式

示例一
质能守恒方程 $E=mc^2$ 来表达。

$$ 表示整行公式

示例二
$$\sum_{i=1}^n a_i=0$$

$$f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$

$$\sum^{j-1}_{k=0}{\widehat{\gamma}_{kj} z_k}$$

显示效果：

质能守恒方程 \(E=mc^2\) 来表达。

\[\sum_{i=1}^n a_i=0 \]

\[f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 \]

\[\sum^{j-1}_{k=0}{\widehat{\gamma}_{kj} z_k} \]

更多语法参考：MathJax语法参考

入门高级篇

说明：高级篇的语法内容绝大部分Markdown编辑显示工具均不支持，需要相应的第三方渲染库支持。

流程图

语法：

```flow
st=>start: 开始:> http://blog.thou.cc
io=>inputoutput: 验证
op=>operation: 你的操作
cond=>condition: 成功或者失败？
sub=>subroutine: 你的子路由
e=>end: 结束

st->io->op->cond
cond(yes)->e
cond(no)->sub->io
```

更多语法参考：流程图语法参考

序列图

示例一
```seq
小明->王大锤: 你好，大锤！
Note right of 王大锤: 大锤思考中
王大锤-->小明: 我很好!
```

示例二
```seq
Title: 这是一个标题
A->B: 正常线
B-->C: 虚线
C->>D: 露箭头线
D-->>A: 露箭头虚线
```

更多语法参考：序列图语法参考

甘特图

甘特图内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。

```gantt
    title 项目开发流程
    section 项目确定
        需求分析       :a1, 2016-06-22, 3d
        可行性报告     :after a1, 5d
        概念验证       : 5d
    section 项目实施
        概要设计      :2016-07-05  , 5d
        详细设计      :2016-07-08, 10d
        编码          :2016-07-15, 10d
        测试          :2016-07-22, 5d
    section 发布验收
        发布: 2d
        验收: 3d
```

更多语法参考：甘特图语法参考

Mermaid 流程图

```graphLR
    A[小明] -->|交往| B(小红)
    B --> C{结婚}
    C -->|One| D[儿子]
    C -->|Two| E[女儿]
```

更多语法参考：Mermaid 流程图语法参考

Mermaid 序列图

```sequence
    小明->大锤: 大锤，最近可好？
    loop 大锤复读机
        大锤-->小明: 我很好!
    end
```

更多语法参考：Mermaid 序列图语法参考

Iconfont 内嵌图标

显示 Github 的图标
<i class="iconfont icon-github"></i>
<i class="iconfont icon-github icon-2x"></i>

显示效果：

更多的图标和玩法可以参看 font-awesome | Iconfont官方网站。

HTML标签衍生功能

说明：根据Markdown对HTML语法的支持，使用HTML标签扩展一些额外的功能。

插入音频

说明：基于HTML标签语法插入外链音频。

语法：

<audio controls preload="auto">
    <source src="音频链接">
</audio>

插入视频

说明：基于HTML标签语法插入外链视频。

语法：

基础版
<video src="视频链接" controls="controls">
    您的浏览器不支持Video标签！
</video>

高级版
<video controls="" preload="none" poster="视频第一帧图片链接"          width="%100" height="%100>
  <source id="mp4" src="视频链接" type="video/mp4">
  您的浏览器不支持Video标签！
</video>

显示效果：

更多 vedio 标签参数说明 传送门

Github BTN

说明：显示Github上项目的Start、Fork、Watch等等数据。

使用详情传送门

Asciinema 命令行动画

说明：将命令行执行过程保存为动画形式用于展示。

语法：

  <center>
          <iframe src="https://asciinema.org/a/开放的ID/embed?" 
                  scrolling="no" allowfullscreen="true" 
                  style="overflow: hidden; margin: 0px; border: 0px;display: inline-block; 
                  width: 100%; float: none; visibility: visible; height: 420px;"">
          </iframe>
  </center>

显示效果：

Asciinema官网传送门

参考资料

• Cmd Markdown 高阶语法手册