markdown 语法总结（一）

红太狼 2021-10-25 13:38 372阅读 0赞

### 1.标题 ###

**代码**

注：\# 后面保持空格

# h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ####### h7 // 错误代码 ######## h8 // 错误代码 ######### h9 // 错误代码 ########## h10 // 错误代码

**演示**

# h1 #

## h2 ##

### h3 ###

#### h4 ####

##### h5 #####

###### h6 ######

\#\#\#\#\#\#\# h7  
\#\#\#\#\#\#\#\# h8  
\#\#\#\#\#\#\#\#\# h9  
\#\#\#\#\#\#\#\#\#\# h10

--------------------

### 2.分级标题 ###

**代码**  
注：`=` `-` 最少可以只写一个，兼容性一般

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

**演示**

![Image 1][]

--------------------

### 3.TOC ###

注：根据标题生成目录，兼容性一般

**代码**

[TOC]

**演示**

![Image 1][]

--------------------

### 4.引用 ###

**代码1(单行式)**

> hello world!

**演示**

> hello world!

**代码2(多行式)**

> hello world!
    hello world!
    hello world!

或者

> hello world!
    > hello world!
    > hello world!

**演示**

相同的结果

> hello world!  
> hello world!  
> hello world!

**代码3(多层嵌套)**

> aaaaaaaaa >> bbbbbbbbb >>> cccccccccc

**演示**

> aaaaaaaaa
> 
> > bbbbbbbbb
> > 
> > > cccccccccc

--------------------

### 5.行内标记 ###

注：用 \` 标记**代码块将变成一行**

**代码**

标记之外`hello world`标记之外

**演示**

标记之外`hello world`标记之外

**错误代码**  
注：不同平台错误略有差异

标记之外 ` 
    < div> < div></div> < div></div> < div></div> < /div> `标记之外

**演示**

![Image 1][]

--------------------

### 6.代码块 ###

注：与上行距离一空行

**代码1(\`\`\`)**

注：用```` ``` ````生成块

```
    <div> <div></div> <div></div> <div></div> </div> ```

**演示**

**代码2(Tab)**

注： Tab缩进

我是文字……
    
        <div> <div></div> <div></div> <div></div> </div>

**演示**

**代码3(自定义语法)**  
注：根据不同的语言配置不同的代码着色

```javascript var num = 0; for (var i = 0; i < 5; i++) { num+=i; } console.log(num); ```

**演示**

var num = 0; for (var i = 0; i < 5; i++) { num+=i; } console.log(num);

--------------------

### 7.插入链接 ###

**代码1(内链式)**  
注：`{:target="_blank"}`跳转方式兼容性一般 ，多数第三方平台不支持跳转

[百度1](http://www.baidu.com/" 百度一下"){ :target="_blank"}

**演示**

[百度1][1]

**代码2(引用式)**

[百度2][2]{ :target="_blank"} [2]: http://www.baidu.com/ "百度二下"

**演示**

[百度2][1]

--------------------

### 8.插入图片 ###

**代码1(内链式)**

[图片上传失败...(image-90880b-1542510791300)]

**演示**

![Image 1][]

**代码2(引用式)**

![name][01]
    [01]: ./01.png '描述'

**演示**

![Image 1][]

--------------------

### 9.插入图片带有链接 ###

**代码**

[[图片上传失败...(image-f83b77-1542510791300)]](http://www.baidu.com){:target="_blank"} // 内链式 [[图片上传失败...(image-4dc956-1542510791300)]][5]{:target="_blank"} // 引用式 [5]: http://www.baidu.com

**演示**

![Image 1][]

\]\[5\]  
\[5\]: [http://www.baidu.com][http_www.baidu.com]

--------------------

### 10.视频插入 ###

注：Markdown 语法是不支持直接插入视频的  
普遍的做法是 插入HTML的 iframe 框架，通过网站自带的分享功能获取，如果没有可以尝试第二种方法  
第二是伪造播放界面，实质是插入视频图片，然后通过点击跳转到相关页面

**代码1**  
注：多数第三方平台不支持插入`<iframe>`视频

![Image 1][]

youku

**演示**

![Image 1][]

**代码2**

[[图片上传失败...(image-49aefe-1542510791300)]](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction){:target="_blank"}

**演示**

![Image 1][]

--------------------

### 11.序表 ###

**代码1(有序)**

注：序列`.`后 保持空格

1. one
    2. two
    3. three

**演示**

1.  one
2.  two
3.  three

**代码2(无序)**

* one
    * two
    * three

**演示**

*  one
 *  two
 *  three

**代码3(序表嵌套)**

1. one
        1. one-1
        2. two-2
    2. two 
        * two-1
        * two-2

**演示**

1.  one
    
    1.  one-1
    2.  two-2
2.  two
    
     *  two-1
     *  two-2

--------------------

**代码4(序表嵌套代码块)**  
注：换行+两个Tab

* one var a = 10; // 与上行保持空行并 递进缩进

**演示：**

*  one
    
        var a = 10;

--------------------

### 12.任务列表 ###

注：兼容性一般 要隔开一行

**代码**

这是文字…… - [x] 选项一 - [ ] 选项二 - [ ] [选项3]

**演示**

![Image 1][]

--------------------

### 13.表情 ###

注：兼容一般

![Image 1][]

[表情代码地址][Link 1]

--------------------

### 14.表格 ###

注： `:` 代表对齐方式 ,\*\* `:` 与 `|` 之间不要有空格\*\*，否则对齐会有些不兼容

**代码1**

| a | b | c | |:-------:|:------------- | ----------:| | 居中 | 左对齐 | 右对齐 | |=========|===============|============|

**演示**

--------------------

**代码2(简约写法)**

a | b | c :-:|:- |-: 居中 | 左对齐 | 右对齐 ============|=================|=============

**演示**

**代码3(特殊表格)**

注：一般对合并单元格，以及其他特殊格式表格，markdown 是无能为力的  
所以常规的做法是使用HTML标签，但是这样的编写效率极低。  
但是有了这款工具的话，所有问题都迎刃而解。

在线生成HTML代码 [Tables Generator][] (国外的站)

![Image 1][]

Tables Generator

**演示**

![Image 1][]

--------------------

### 15.支持内嵌CSS样式 ###

**代码**

**演示**

![Image 1][]

--------------------

### 16.语义标记 ###

--------------------

### 17.语义标签 ###

--------------------

### 18.格式化文本 ###

**保持输入排版格式不变**  
注：对内含标签需要破坏结构才能显示

**代码**

<pre> hello world hi hello world </pre>

**演示**

<pre>  
hello world  
hi  
hello world  
</pre>

**错误解决方法**  
注：标签内部添加空格 或者 **直接使用```` ``` ````标记来处理**  
**代码1(插入空格)**

**演示**

**代码2( ```` ``` ```` 代码块标记)**

```
    <div> <div></div> <div></div> <div></div> </div> ```

**演示**

--------------------

### 19.公式 \{\#1\} ###

注：1个$左对齐，2个居中

**代码**

$$ x \href{why-equal.html}{=} y^2 + 1 $$ $ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $

**演示**

![Image 1][]

--------------------

### 20.分隔符 ###

注：最少三个 `---` 或 `***`或 `* * *`

**代码**

***
    ---
    * * *

**演示**

--------------------

### 21.脚注 ###

**代码**

Markdown[^1] [^1]: Markdown是一种纯文本标记语言 // 在文章最后面显示脚注

**演示**

Markdown\[1\]

--------------------

### 22.锚点 ###

**代码**  
注：只有**标题**支持锚点， 跳转目录方括号后 保持空格

[公式标题锚点](#1) ### [需要跳转的目录] {#1} // 方括号后保持空格

**演示**

公式标题锚点

--------------------

### 23.定义型列表 ###

注：解释型定义  
**代码**

Markdown : 轻量级文本标记语言，可以转换成html，pdf等格式 // 开头一个`:` + `Tab` 或 四个空格 代码块定义 : 代码块定义…… var a = 10; // 保持空一行与 递进缩进

**演示**

![Image 1][]

--------------------

### 24.自动邮箱链接 ###

**代码**

<xxx@outlook.com>

**演示**

[xxx@outlook.com][xxx_outlook.com]

--------------------

### 25.流程图 ###

**代码1**

```flow // 流程 st=>start: 开始|past:> http://www.baidu.com // 开始 e=>end: 结束 // 结束 c1=>condition: 条件1:>http://www.baidu.com[_parent] // 判断条件 c2=>condition: 条件2 // 判断条件 c3=>condition: 条件3 // 判断条件 io=>inputoutput: 输出 // 输出 //----------------以上为定义参数------------------------- //----------------以下为连接参数------------------------- // 开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束 st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e c1(no)->e // 条件1不满足->结束 c2(no)->e // 条件2不满足->结束 c3(no)->e // 条件3不满足->结束 ```

**演示**

![Image 1][]

**代码详解**  
流程图分为两个部分： **定义参数** 然后 **连接参数**

**定义示例：**

tag=>type: content:>url // 形参格式 st=>start: 开始:>http://www.baidu.com[blank] //实参格式

注：\*\* `st=>start: 开始` 的`：`后面保持空格\*\*

<table> 
 <thead> 
  <tr> 
   <th>形参</th> 
   <th>实参</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tag</td> 
   <td>st</td> 
   <td>标签 (可以自定义)</td> 
  </tr> 
  <tr> 
   <td>=&gt;</td> 
   <td>=&gt;</td> 
   <td>赋值</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>start</td> 
   <td>类型 (6种类型)</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>开始</td> 
   <td>描述内容 (可以自定义)</td> 
  </tr> 
  <tr> 
   <td>:&gt;url</td> 
   <td><code>http://www.baidu.com[blank]</code></td> 
   <td>链接与跳转方式 <strong>兼容性很差</strong></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>6种类型</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>start</td> 
   <td>启动</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>结束</td> 
  </tr> 
  <tr> 
   <td>operation</td> 
   <td>程序</td> 
  </tr> 
  <tr> 
   <td>subroutine</td> 
   <td>子程序</td> 
  </tr> 
  <tr> 
   <td>condition</td> 
   <td>条件</td> 
  </tr> 
  <tr> 
   <td>inputoutput</td> 
   <td>输出</td> 
  </tr> 
 </tbody> 
</table>

**连接示例：**

st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e 开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束

<table> 
 <thead> 
  <tr> 
   <th>形参</th> 
   <th>实参</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-&gt;</td> 
   <td>-&gt;</td> 
   <td>连接</td> 
  </tr> 
  <tr> 
   <td>condition</td> 
   <td>c1</td> 
   <td>条件</td> 
  </tr> 
  <tr> 
   <td>(布尔值,方向)</td> 
   <td>(yes,right)</td> 
   <td>如果满足向右连接，4种方向：right ，left，up ，down 默认为：down</td> 
  </tr> 
 </tbody> 
</table>

注：operation (程序); subroutine (子程序) ;condition (条件)，都可以在括号里加入连接方向。

operation(right) subroutine(left) condition(yes,right) // 只有条件 才能加布尔值

--------------------

**代码2**

注：添加样式和url跳转 需要添加第三方的脚本  
实际效果很差，使用起来麻烦，意义不大

```flow // 流程 st=>start: 启动|past:>http://www.baidu.com[blank] // 开始 e=>end: 结束 // 结束 op1=>operation: 方案一 // 运算1 sub2=>subroutine: 方案二|approved:>http://www.baidu.com[_parent] // 运算2 sub3=>subroutine: 重新制定方案 // 运算2 cond1=>condition: 行不行？|request // 判断条件1 cond2=>condition: 行不行？ // 判断条件2 io=>inputoutput: 结果满意 // 输出 // 开始->方案1->判断条件-> st->op1->cond1 // 判断条件1为no->方案2->判断条件2为no->重新制定方案->方案1 cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1 cond1(yes)->io->e // 判断条件满足->输出->结束 cond2(yes)->io->e // 判断条件满足->输出->结束 ```

**演示**

![Image 1][]

**作者地址：[flowchart.js][]**

**一般普遍支持的效果**

![Image 1][]

--------------------

### 26.时序图 ###

**代码1**

```sequence A->>B: 你好 Note left of A: 我在左边 // 注释方向，只有左右，没有上下 Note right of B: 我在右边 B-->A: 很高兴认识你 ```

**演示**

![Image 1][]

**代码详解**

注：`A->>B: 你好` 后面可以不写文字，但是一定要在最后加上`：`  
Note left of A 代表注释在A的左边

**代码2**

```sequence 起床->吃饭: 稀饭油条 吃饭->上班: 不要迟到了 上班->午餐: 吃撑了 上班->下班: Note right of 下班: 下班了 下班->回家: Note right of 回家: 到家了 回家-->>起床: Note left of 起床: 新的一天 ```

**演示**

![Image 1][]

### 27.生成侧边栏扩展 ###

注：生成侧边栏一般是插入JS，再就是模板,  
总体来说，很是麻烦，效果一般，不作详解。

作者仓库：[i5ting\_ztree\_toc][i5ting_ztree_toc]

![Image 1][]

精简版：作者博客[HaleyPKU][]

#### 总结：常用标记 ####

<table> 
 <thead> 
  <tr> 
   <th>标记</th> 
   <th>Markdown 语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>斜体</td> 
   <td><code>*italic*</code></td> 
  </tr> 
  <tr> 
   <td>粗体</td> 
   <td><code>**bold**</code></td> 
  </tr> 
  <tr> 
   <td>图片</td> 
   <td><code>![Image Title](http://xxx.png)</code></td> 
  </tr> 
  <tr> 
   <td>链接</td> 
   <td><code>[Link Text](http://xxx.com)</code></td> 
  </tr> 
  <tr> 
   <td>内联代码</td> 
   <td><code>`code`</code></td> 
  </tr> 
  <tr> 
   <td>块级代码</td> 
   <td><code>```code block```</code></td> 
  </tr> 
  <tr> 
   <td>引用</td> 
   <td><code>&gt; Here is a quote block</code></td> 
  </tr> 
  <tr> 
   <td>分隔符</td> 
   <td> <code>----</code> 或 <code>*****</code> </td> 
  </tr> 
  <tr> 
   <td>标题 1</td> 
   <td><code># Heading 1</code></td> 
  </tr> 
  <tr> 
   <td>标题 2</td> 
   <td><code>## Heading 2</code></td> 
  </tr> 
  <tr> 
   <td>标题 3</td> 
   <td><code>### Heading 3</code></td> 
  </tr> 
  <tr> 
   <td>标题 4</td> 
   <td><code>#### Heading 4</code></td> 
  </tr> 
 </tbody> 
</table>

#### Markdown编写工具 ####

[Typora：https://typora.io][Typora_https_typora.io]

![Image 1][]

--------------------

1.  Markdown是一种纯文本标记语言 ↩

作者：欧薇娅  
链接：https://www.jianshu.com/p/b03a8d7b1719  
来源：简书

转载于:https://www.cnblogs.com/sweet-ice/p/11349765.html

[Image 1]: 
[1]: http://www.baidu.com/%22%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%22
[http_www.baidu.com]: http://www.baidu.com
[Link 1]: https://www.webpagefx.com/tools/emoji-cheat-sheet/'%20rel=
[Tables Generator]: http://www.tablesgenerator.com/
[xxx_outlook.com]: mailto:xxx@outlook.com
[flowchart.js]: https://github.com/adrai/flowchart.js
[i5ting_ztree_toc]: https://github.com/i5ting/i5ting_ztree_toc
[HaleyPKU]: http://blog.csdn.net/haleypku/article/details/51226704
[Typora_https_typora.io]: https://typora.io/