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

  • 删除线:使用~~包裹文本,如删除线

  • 下划线:使用<u>包裹文本,如带下划线文本

  • 脚注:

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

    脚注[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 链接

普通链接

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

<https://markdown-here.com>
[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

<img src="https://markdown-here.com/img/icon256.png" width="50%">

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

Markdown 高级技巧

支持的 HTML 元素:

  • 不在 Markdown 涵盖范围内的标签,都能直接使用。目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等。

    1. 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
    2. 特殊符号 &copy; &trade; &amp; 18&ordm;C
    3. <span style="color: red;">这是一行红色的文字</span>
    4. 插入视频
    <video src="$appres/images/example.mp4"></video>
    5. Emoji 表情 :smiley:
    
    1. 使用 Ctrl+Alt+Del 重启电脑
    2. 特殊符号 © ™ & 18ºC
    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 王五: 合理 食物 <br/>看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!

甘特图 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. 脚注的内容 ↩︎

posted @ 2020-06-03 17:26  梦幻之心星  阅读(419)  评论(0编辑  收藏  举报