Markdown是很好用的轻量级标记语言，许多开发人员喜欢使用Markdown来记录学习心得和写博客。本篇博客主要介绍Markdown的高级技巧教程，Markdown的基础教程已经在上篇介绍过了。☛ 传送门

目录：

1、Markdown目录

2、Markdown内嵌HTML功能

3、Markdown转义

4、Markdown公式

5、Markdown图

1、Markdown目录

  在使用Markdown写文档时，有时需要给文档生成目录，此时有两种方式可以实现，一个是通过a标签的锚点实现，另一个是通过TOC扩展实现

  通过锚点实现的请参照上篇Markdown的基础教程中Markdown链接的内容☛ 传送门 ，此处主要介绍top扩展方式实现。

  自动生成目录的方式需要对Markdown进行toc扩展，目前主流的编辑器和博客编写都能实现该功能，使用方法很简单，具体用法如下：

[toc]

tip: [top]必须在要生成目录的地方单独一行写

2、Markdown内嵌HTML功能

  Markdown是可以内嵌Html语言的，对于 Markdown 中未包含的标签, 可以直接使用 HTML，没有必要使用定界符或标识符来表明从 Markdown 切换到 HTML; 直接使用标签就行了。

  唯一的限制就是对于 HTML 块级元素 -- 像<div>, <table>, <pre>, <p>, 等等, 必须另起一行单独放 , 并且开始和结束标签前面不能有任何缩进. Markdown 会自动识别这些块级元素而不会在他们周围添加额外的<p>标签。

  例如, 下面是添加 HTML 表格到 Markdown 文件:

非块级元素：<font color=green>**加粗**</font>

<table>

    <tr>

        <td>**表格**</td>

    </tr>

</table>

展示效果：

非块级元素：加粗

**加粗**

注意: Markdown 语法结构在 HTML 块级元素中不会被处理. 例如, 你不该在 HTML 块级元素中使用 Markdown 式的语法如**加粗** 。此外，在部分markdown编辑器中，html中还可以加style来通过css控制样式例如博客园的markdown编辑器和Typora支持，CSDN的markdown编辑器目前好像还不支持。



   你甚至可以使用 HTML 标签替代 Markdown 格式; 例如你可以用 HTML <a> 和 <img> 标签替代 Markdown 的链接和图片语法。以下为部分例子：

斜体标签：<i></i>           <i>i标签斜体</i>   <em>em标签斜体</em>

粗体标签：<b></b>           <b>粗体</b>

不换行空格标签：&nbsp;       空&nbsp;格

换行标签：</br>

分割线标签：<hr>

删除线标签：<s></s>

上标标签:<sup></sup>          n<sup>2</sup> + 2n + 1 = 0

下标标签:<sub></sub>          H<sub>2</sub>O

高亮标签:<mark></mark>        <mark style="background:green;">高亮 styl</mark>

键盘文本标签：<kbd></kbd>  使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

表格标签：

<table>

   <tr><th>Title1</th><th>Title2</th><th>Title3</th>

   </tr>

   <tr>

      <td>a</td><td>b</td><td>c</td>

   </tr>

   <tr>

      <td>d</td><td>e</td><td>f</td>

   </tr>

</table>

展示效果：

斜体标签： i标签斜体 em标签斜体

粗体标签： 粗体

不换行空格标签：  空 格

换行标签：


分割线标签：



删除线标签： 删除线

上标标签: n2 + 2n + 1 = 0

下标标签: H2O

高亮

键盘文本标签： 使用 Ctrl+Alt+Del 重启电脑

Title1 Title2 Title3
a b c
d e f

具体详细请见:Markdown内联 HTML官方文档

3、Markdown转义

  Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

**文本加粗**

\*\* 正常显示星号 \*\*

展示效果：

文本加粗

** 正常显示星号 **

  Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线

`   反引号

*   星号

_   下划线

{}  花括号

[]  方括号

()  小括号

#   井字号

+   加号

-   减号

.   英文句点

!   感叹号

4、Markdown公式

  当你需要在编辑器中插入数学公式时，可以使用两个美元符 $ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：

$$

\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}

\mathbf{i} & \mathbf{j} & \mathbf{k} \\

\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\

\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\

\end{vmatrix}

$$

展示效果：

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
\]

5、Markdown图

  markdown可以画流程图、时序图和甘特图

Markdown流程图

流程图

​```mermaid

graph LR

A[方形] -->B(圆角)

    B --> C{条件a}

    C -->|a=1| D[结果1]

    C -->|a=2| E[结果2]

​```(横向流程图)

***

​```mermaid

graph TD

A[方形] --> B(圆角)

    B --> C{条件a}

    C --> |a=1| D[结果1]

    C --> |a=2| E[结果2]

​```(竖向流程图)

tip：复制代码时 ` 后面不能加其他字符

符号 属性 说明
graph LR / RL or TD LR:从左到右；RL:从右到左;
TD：从上到下
--> 箭头
name[text] 方形框 name:标记该项；text：文本内容
name(text) 圆角框 name:标记该项；text：文本内容
name{text} 棱形框 name:标记该项；text：文本内容
| text| 插入内容 text：超乳到箭头上的内容

展示效果：

graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]

(横向流程图)

graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]

(竖向流程图)

标准流程图（默认竖向）

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```

说明：

先定义各个框变量,语法为：

name=>框类型：内容

框类型有:

start(开始框)；

operation: 处理框；

condition:判断框；

subroutine: 子流程框；

inputoutput: 输入输出框；

end: 结束框

再用‘->'链接各个类型的框形成流程图

tip:链接时必须完整，否则不会显示

展示效果（此方法在博客园无法正常显示）：

st=>start: 开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st->op->cond

cond(yes)->io->e

cond(no)->sub1(right)->op

(标准流程图:竖向)

标准流程图（横向）

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

说明：
想要控制箭头横向指向左或右只需要在'->'后加上'(left)'或'(right)'

展示效果（此方法在博客园无法正常显示）：

st=>start: 开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st(right)->op(right)->cond

cond(yes)->io(bottom)->e

cond(no)->sub1(right)->op

(标准流程图：横向)

Markdown UML时序图

UML时序图

```sequence
Title: 标题：复杂使用
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```

展示效果：

Title: 标题：复杂使用

对象A->>对象B: 对象B你好吗?（请求）

Note right of 对象B: 对象B的描述

Note left of 对象A: 对象A的描述(提示)

对象B-->>对象A: 我很好(响应)

对象B->>小三: 你好吗

小三-->>对象A: 对象B找我了

对象A->>对象B: 你真的好吗？

Note over 小三,对象B: 我们是朋友

participant C

Note right of C: 没人陪我玩

UML标准时序图

​```mermaid

%% 时序图例子,-> 直线，-->虚线，->>实线箭头

  sequenceDiagram

    participant 张三

    participant 李四

    张三->王五: 王五你好吗？

    loop 健康检查

        王五->王五: 与疾病战斗

    end

    Note right of 王五: 合理 食物 <br/>看医生...

    李四-->>张三: 很好!

    王五->李四: 你怎么样?

    李四-->王五: 很好!

​```(UML标准时序图)

展示效果：

%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!

Markdown 甘特图

​```mermaid

        gantt

        dateFormat  YYYY-MM-DD

        title 软件开发甘特图

        section 设计

        需求                      :done,    des1, 2014-01-06,2014-01-08

        原型                      :active,  des2, 2014-01-09, 3d

        UI设计                     :         des3, after des2, 5d

    未来任务                     :         des4, after des3, 5d

        section 开发

        学习准备理解需求                      :crit, done, 2014-01-06,24h

        设计框架                             :crit, done, after des2, 2d

        开发                                 :crit, active, 3d

        未来任务                              :crit, 5d

        耍                                   :2d

        section 测试

        功能测试                              :active, a1, after des3, 3d

        压力测试                               :after a1  , 20h

        测试报告                               : 48h

​```(甘特图)

展示效果：

gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h

说明：由于markdown编辑器对markdown的拓展程度不同，可能在不同的编辑器/博客中显示的样式会有所差别甚至无法正常显示。

本博客与CSDN博客༺ཌ༈君☠纤༈ད༻同步发布

Markdown进阶教程的更多相关文章

  1. duilib进阶教程 -- 总结 (17)

    整个教程的代码下载:http://download.csdn.net/detail/qq316293804/6502207 (由于duilib进阶教程主要介绍界面,所以这个教程只给出界面相关的代码,完 ...

  2. duilib进阶教程 -- Container控件的bug (14)

    在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...

  3. Gensim进阶教程：训练word2vec与doc2vec模型

    本篇博客是Gensim的进阶教程,主要介绍用于词向量建模的word2vec模型和用于长文本向量建模的doc2vec模型在Gensim中的实现. Word2vec Word2vec并不是一个模型--它其 ...

  4. Bash脚本15分钟进阶教程

    转载: Bash脚本15分钟进阶教程 这里的技术技巧最初是来自谷歌的"Testing on the Toilet" (TOTT).这里是一个修订和扩增版本. 脚本安全 我的所有ba ...

  5. Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!

      分类: Android高手进阶 Android基础教程 2012-09-14 18:10 29759人阅读 评论(35) 收藏 举报 android相册layoutobjectclassloade ...

  6. Nodejs爬虫进阶教程之异步并发控制

    Nodejs爬虫进阶教程之异步并发控制 之前写了个现在看来很不完美的小爬虫,很多地方没有处理好,比如说在知乎点开一个问题的时候,它的所有回答并不是全部加载好了的,当你拉到回答的尾部时,点击加载更多,回 ...

  7. CSDN Markdown简明教程5-高速上手

    0.文件夹 文件夹 前言 CSDN Markdown特点 CSDN Markdown高速上手 1 使用快捷键 粗体斜体 引用 链接 高亮代码块 图片 标题 列表 切割线 撤销反复 2 使用离线写作 3 ...

  8. CSDN Markdown简明教程3-表格和公式

    0. 文件夹 文件夹 前言 表格 1 表格 2 表格对齐方式 公式 1 行内公式 2 陈列公式displayed formulas 3 MathJax语法 深入 声明 1. 前言 Markdown是一 ...

  9. CSDN Markdown简明教程4-UML画画

    0.文件夹 文件夹 前言 序列图 1 序列图演示样例 2 序列图语法 流程图 1 流程图演示样例 2 流程图语法 节点定义 节点连接 Gravizo 声明 1. 前言 Markdown是一种轻量级的标 ...

随机推荐

  1. 后台实战——用户登录之JWT

    https://blog.csdn.net/jackcheng_ht/article/details/52670211

  2. Win10桌面菜单弹出cmd解决办法

    现象 Win10右键菜单打开弹出命令提示符 原有个性化.显示设置.网络和Internet设置无法使用 解决 注册表定位到HKEY_CURRENT_USER\Software\Classes\ ms-s ...

  3. select count(1)和select count(*)的区别

    select count(1) from 表a //查询时会对常数列进行统计行数select count(*) from 表a //查询时会找表a中最短的列进行统计行数 因为使用count(*)查询会 ...

  4. 0008 基于DRF框架开发（01 DRF开发的基本流程）

    1 创建模型 由于之前在<004 工程配置>中,已在Applications/Organizations/models中创建了一个UserInfo模型.此处引用这个模型. from dja ...

  5. 08-SV面向对象编程的高级技巧指南

    1.原始类与扩展类 (1)原始类被称为父类或者超类,扩展类被称为派生类或者子类.扩展类可以直接访问原始类和其本身的所有变量,应该将原始类中的子程序定义成虚拟的,这样它们就可以在扩展类中重定义.new函 ...

  6. [CF1303C] Perfect Keyboard - DFS

    Solution 根据原字符串建图,每个字符是一个点,相邻则连边 然后从每一个度数为 \(1\) 的点开始爆搜连通块,合法情况下应该是一条链 #include <bits/stdc++.h> ...

  7. laravel打印查询sql

    方法一(此方法支持 select 语句,insert,delect,update不支持) : $sql = DB::table('my_table')->select()->tosql() ...

  8. Winform递归绑定树节点

    /// <summary> /// 绑定树节点 /// </summary> /// <param name="pid"></param& ...

  9. Spring学习笔记-Spring之旅-01

    使用Spring简化JAVA开发 Spring的四种关键策略: ●基于POJO的轻量级和最小侵入式编程: ●通过依赖注入(DI)和面向接口实现松耦合: ●基于切面(AOP)和惯例进行声明式编程. ●通 ...

  10. 前端面试必备技巧（二）css盒模型及BFC

    CSS盒模型 基本概念:标准模型+IE模型及区别 CSS如何设置这两种模型? JS如何设置获取盒模型对应的宽和高? 实例题(根据盒模型解释边距重叠) BFC边距重叠解决方案 (1)BFC的基本概念:b ...