Markdown语法说明及测试一览表

标题：Markdown语法说明及测试一览表
作者：梦幻之心星    sky-seeker@qq.com
标签：[#Markdown,#Typora,#Markdown_Nice,#CSS]
目录：[Markdown]
日期：2020-06-3

Markdown 注意事项

  • 嵌套：在对象的行首放置2个空格(列表嵌套至少需要3个空格)
  • 换行：在行的结束处放置2个空格后回车
  • 换段：在两行之间空一行

Markdown 目录

  • 在文中放置[toc]

Markdown 代码

行内代码

  • 用 ` 包裹行内代码

代码区块

  • 推荐使用```包裹代码块，不推荐在代码块的行首放置至少4个空格或1个制表符

行首放置空格

在代码块的行首放置4个空格，段落和代码区块之间至少空一行。

h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/cnblogs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

包裹代码块：段落

段落和代码区块之间可以有空行

h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/cnblogs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

包裹代码块：无序列表

  • 在无序列表内嵌套代码区块，代码块的行首需要放置2个或者4个空格，列表项和代码区块之间可以有空行。
    h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/cnblogs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

包裹代码块：有序列表

  1. 在有序列表内嵌套代码区块，代码块的行首需要放置4个空格，列表项和代码区块之间可以有空行。

    h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/cnblogs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

  2. 放置2个空格时，渲染效果与放置4个空格时一致，但是代码块不会嵌套缩进。

h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/cnblogs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

Markdown 标题

  • 在标题前放置1~6个#号

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

Markdown 段落格式

常用通用部分。

  • 用1~3个*包裹文本分别实现斜体、粗体、粗斜体，不推荐使用 _ 。

  • 这是*包裹的斜体文本，这是_包裹的_斜体_文本

  • 这是**包裹的粗体文本，这是__包裹的__粗体__文本

  • 这是***包裹的粗斜体文本，这是___包裹的___粗斜体___文本

非常用通用部分。

  • 下标：使用~包裹文本，如H2O

  • 上标：使用^包裹文本，如X2

  • 高亮：使用==包裹文本，如highlight

  • 删除线：使用~~包裹文本，如删除线

  • 下划线：使用包裹文本，如带下划线文本

  • 脚注：

    脚注[^脚注文本]
[^脚注文本]: 脚注的内容

    脚注[1]

  • 分隔线：3个及以上连续的-

Markdown 列表

无序列表

在-后面带一个空格，不推荐使用 + 和 *。

  • 无序列表 -
  • 无序列表 -
  • 无序列表 -
  • 无序列表 *
  • 无序列表 +

有序列表

在阿拉伯数字后面带一个.和一个空格

  1. 有序列表1.
  2. 有序列表2.

列表嵌套

在无序列表中嵌套列表，需要在子列表中的行首放置至少2个空格。
在有序列表中嵌套列表，需要在子列表中的行首放置至少3个空格。

  • 列表嵌套 -
    1. 列表嵌套 -1.
    • 列表嵌套 --
  1. 列表嵌套 1.
    1. 列表嵌套 1.1.
    • 列表嵌套 1.-

任务列表

在 + 后面带一个空格，在空格后再带一个 [ ] ， [ ] 的后面再带一个空格， [ ] 里面为一个空格时表示任务未完成， [ ] 里面为一个 x 时表示任务已完成。不推荐使用 - 和 *。

  • [x] 已完成任务 + [x]
  • [ ] 待完成任务 + [ ]
    • [ ] 待完成任务 __+ [ ]
  • [x] 已完成任务 - [x]
  • [x] 已完成任务 * [x]

Markdown 表格

  • 用 | 分隔单元格，用 - 分隔表头和其他行，用 : 控制对齐方式
| 表头   | 左对齐 | 右对齐 | 居中对齐 |
| ------ | :----- | -----: | :------: |
| 单元格 | 单元格 | 单元格 |  单元格  |
| 单元格 | 单元格 | 单元格 |  单元格  |
表头 左对齐 右对齐 居中对齐
单元格 单元格 单元格 单元格
单元格 单元格 单元格 单元格

Markdown 区块

区块引用

  • 在行首放置1个 >

区块引用

区块引用嵌套

在行首放置多个 > ，段落和列表的下一行放置 > 时会自动对区块引用进行嵌套

最外层

第一层嵌套

第二层嵌套

区块引用中使用列表

  1. 有序列表 1.
  2. 有序列表 1.
  • 无序列表 -
  • 无序列表 -

列表中使用区块引用

在 > 前添加2个空格的缩进

  • 第一项

    区块引用

Markdown 链接

普通链接

<链接地址>
[链接名称](链接地址)
[链接名称](链接地址 "可选标题")


[Markdown Here](https://markdown-here.com)
[Markdown Here](https://markdown-here.com "Markdown Here 标题")

https://markdown-here.com

Markdown Here

Markdown Here

锚点链接（在文档的结尾为变量赋值）

[链接名称][网址变量]
[网址变量]:链接地址

[Markdown Here][markdown_here_url]
[Markdown_Here_url]:https://markdown-here.com

Markdown Here

Markdown 图片

一般图片链接

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 '可选标题')
![alt 属性文本](图片地址 "可选标题")

![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg)
![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg '梦幻之心星'))
![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg "梦幻之心星")

梦幻之心星

梦幻之心星

梦幻之心星

高级链接

  • 在文档的结尾为变量赋值
![alt 属性文本][图片地址变量]
[图片地址变量]: 图片地址

![梦幻之心星][Sky-seeker_url]
[Sky-seeker_url]: https://img.skyseeker.eu.org/dream-seeker.jpg

![梦幻之心星][Sky-seeker_url]
[Sky-seeker_url]: https://img.skyseeker.eu.org/dream-seeker.jpg

Markdown 高级技巧

支持的 HTML 元素:

  • 不在 Markdown 涵盖范围内的标签，都能直接使用。目前支持的 HTML 元素有：
    等。

    1. 使用 Ctrl+Alt+Del 重启电脑
2. 特殊符号 © ™ & 18ºC
3. 这是一行红色的文字
4. 插入视频

5. Emoji 表情 :smiley:
    1. 使用 Ctrl+Alt+Del 重启电脑
    2. 特殊符号 ? ? & 18oC
    3. 这是一行红色的文字
    4. 插入视频
    5. Emoji 表情 ??

转义：

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

数学公式

  • 使用美元符 $ 包裹 TeX 或 LaTeX 格式的数学公式

  1. 行内公式 $E=mc^2$，如 \(E=mc^2\)

  2. 块公式

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

$$
\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}
{$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

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

\[\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} {$tep1}{\style{visibility:hidden}{(x+1)(x+1)}} \]

画图

饼图 mermaid pie

pie title LightZhan创作，允许规范转载（http://lightzhan.xyz） "Joplin" : 42.96 "Qdown" : 50.05 " 黑科技" : 10.01 "其它" : 5

横向流程图 mermaid graph LR

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

竖向流程图 mermaid graph TD

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

标准流程图 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

标准流程图（横向） 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

UML 时序图 sequence

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？

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: 没人陪我玩

UML 标准时序图 mermaid

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

甘特图 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

版权声明：本文为「梦幻之心星」原创，依据 CC BY-NC-SA 4.0 许可证进行授权，转载请附上原文出处链接及本声明。

博客园地址：https://www.cnblogs.com/Sky-seeker

微信公众号：关注微信公众号，获取即时推送
微信名：梦幻之心星 微信号：Sky-seeker

  1. 脚注的内容 ??

Markdown_NiceCSSTypora]Markdown

相关

DOM修改 使用DOM操作CSS

HTML和CSS

1.css布局技巧

Scss支持多主题切换的方案实现

google icons 的使用 和 css 设置图标为 loading 状态

node-scss npm的时候报错

CSS设置文字超出部分自动换行

整理gulp自动化构建工具(包含PostCss)

CSS背景属性

css中溢出的处理

51-Web基础-CSS

CSS3与页面布局学习总结（四）——页面布局大全

标签

一品网 冀ICP备14022925号-6