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. 【笔记】机器学习 - 李宏毅 - 8 - Backpropagation

    反向传播 反向传播主要用到是链式法则. 概念: 损失函数Loss Function是定义在单个训练样本上的,也就是一个样本的误差. 代价函数Cost Function是定义在整个训练集上的,也就是所有 ...

  2. Markdown数学公式如何打出回归符号

    来源:https://blog.csdn.net/garfielder007/article/details/51646604 函数.符号及特殊字符 语法 效果 语法 效果 语法 效果 \bar{x} ...

  3. Linux——基础之vi编辑器，编辑器之神！

    VI编辑器是什么? 我们学了怎么多的命令,都是为了我们的linux系统和远程操作的方便,那么我们现在怎么,编辑服务器上的文件和软件呢? 换句话说,就是我们如何通过命令行去完成文本和代码的编写,和系统的 ...

  4. Spring Aop和Spring Ioc（二）

    Spring IOC: DI注入集合类型: 实体类: package cn.spring.entity; import java.util.*; public class Dientity { pri ...

  5. php 获取当前目录和当前文件夹

    <?php /** * PHP获取路径或目录实现 */ //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ========> ".__FILE__; ...

  6. DataReader类型化数据读取与装箱性能研究

    前言 在各种ORM框架或者SQL映射框架(例如MyBatis,SOD框架之SQL-MAP功能)中,都有将查询的结果映射为内存对象的需求,包括映射到实体类.简单类型(例如Java的POJO,.NET的P ...

  7. SpringBoot初学（4）– JdbcTemplate和Mybatis

    前言 github: https://github.com/vergilyn/SpringBootDemo 代码位置: 一.Spring Boot集成JdbcTemplate或NamedParamet ...

  8. Yarn报错：Exception message: /bin/bash: line 0: fg: no job control

    Exception message: /bin/bash: line 0: fg: no job control 这个错误是 本地idea跨平台远程调试hadoop集群出现的,在使用windows调用 ...

  9. Game with string CodeForces - 1104B

    虽然只是B题,还是div2的 但感觉挺有意思,所以写一篇博客记录一下 最初的想法是利用DP去做,f[s]=true表示字符串s对应先手赢,否则对应后手赢,大致想了下发现是指数级别的算法,看了下范围直接 ...

  10. Spring BeanDefinitionHolder源码解析

    BeanDefinitionHolder源码解析 继承关系 实现的接口 和BeanDefinition一样实现了BeanMetadataElement接口,获得了获取数据源(配置类的class对象)的 ...