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. 循环删除List集合的元素

    之前在使用list集合循环删除元素的时候,竟然出现了集合内的元素不能删除成功的问题,之后整理了一下,发现大有玄机! 1.如果指定了list的size大小,会出现下标越界异常 List<Strin ...

  2. java-局部变量，成员变量区别

    1. 内存中的位置 成员变量: 堆内存 局部变量: 栈内存 2. 生命周期 成员变量:随着对象的创建而存在,随着对象的消失而消失 局部变量:随着方法的调用而存在,随着方法调用完毕而消失 3. 注意事项 ...

  3. JS_0001：js常用知识点

    1,获取常量值 ${} var port = 8080; console.log(`服务器运行在http://${hostName}:${port}`);   2,js中从服务器中获取值,并赋值給ht ...

  4. 关于Dijk采访的一些感想

    有效的程序员不应该浪费很多时间用于程序调试,他们应该一开始就不要把故障引入! 反复,一遍又一遍的尝试,真的会让人心烦,对于有的问题解决不了,其实有很多原因,写出来的程序其实是非常考验人的细节处理能力的 ...

  5. Reg文件操作

    注册表REG脚本文件测试 1.新建主键 例如,想在主键［HKEY_CURRENT_USER\Software］下新建一个名叫“新建主键名称”的主键. 可以打开记事本,写入如下内容: Windows R ...

  6. Dynamics CRM 365中结合注释和WebApi实现图片上传

    首先需要在实体上使用注释,然后在窗体上引用WebResource. WebResource的代码: <!DOCTYPE html> <html> <head> &l ...

  7. 将smarty安装到MVC架构中

    首先是composer.json { "require": { "smarty/smarty": "^3.1" }, // 自动加载 // ...

  8. 剑指offer-面试题18-删除链表中重复的节点-链表

    /* 题目: 删除链表中重复的节点 */ /* 思路: 1.声明一个头节点head,即使首元节点被删除,也可返回head->next 2.声明两个指针, 一个指针qNode指向确定不会删除的链表 ...

  9. P4802 [CCO 2015]路短最

    Problem 这题的题意是 求一条 经过 起点和终点的 最长路径.且一个点只能经过一次. 我们设定 \(dis_{i,j}\) 为 i 到 j 的距离(应该没有重边) 要注意的是 不能用 \(Flo ...

  10. Linux下文件的七种类型

    文件属性 1. 本章引言 上一章通过学习文件io,知道了如何使用文件io来打开文件,对文件进行读写等操作,那么我们这一章将换一个角度,专门围绕文件属性进行相关的讨论. 1.1 什么是文件属性? 我们通 ...