Markdown语法说明及测试一览表

时间：2021-04-22 15:05:54
标题: Markdown语法说明及测试一览表

作者: 梦幻之心星	347369787@QQ.com

标签: [Markdown, Typora, Markdown_Nice, CSS]

目录: [Markdown]

日期: 2020-6-3

版本：V1.1

Markdown 注意事项

  • 嵌套：一般在对象的行首放置4个空格或1个制表符
  • 换行：在行的结束处放置2个空格后回车
  • 换段：在两行之间空一行

Markdown 目录

  • 在文中放置[toc]

Markdown 代码

行内代码

  • 用`包裹行内代码

代码区块1：段落内的代码块

  • 用```包裹代码块的同时在代码块的行首放置4个空格或1个制表符

    function test() {
    
console.log("Hello world!");
    
}

代码区块2：段落外的代码块

  • 建议使用```包裹代码块，或者在代码块的行首放置4个空格或1个制表符
function test() {

console.log("Hello world!");

}

Markdown 标题

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

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

Markdown 段落格式

常用通用部分。

  • 用1~3个*或_包裹文本分别实现斜体、粗体、粗斜体

斜体文本

斜体文本

粗体文本

粗体文本

粗斜体文本

粗斜体文本

非常用通用部分。

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

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

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

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

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

  • 脚注：

    [1]

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

Markdown 列表

无序列表

  • 在-、+、*后面带一个空格

  • 第一项

  • 第二项
  • 第三项

有序列表

  • 在阿拉伯数字后面带一个.和一个空格
  1. 第一项
  2. 第二项

列表嵌套

  • 需在子列表中的行首放置4个空格或1个制表符
  1. 第一项
    1. 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  • 第二项：
    1. 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素

任务列表

  • 在-、+、*后面带一个空格，在空格后再带一个[ ]，[ ]的后面再带一个空格，[ ]里面为一个空格时表示任务未完成，[ ]里面为一个x时表示任务已完成
  • [x] 已完成任务 1
  • [ ] 待完成任务 2
    • [ ] 待完成任务 2-1
    • [ ] 待完成任务 2-2

Markdown 表格

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

| ------ | :----- | -----: | :------: |

| 单元格 | 单元格 | 单元格 |  单元格  |

| 单元格 | 单元格 | 单元格 |  单元格  |
表头 左对齐 右对齐 居中对齐
单元格 单元格 单元格 单元格
单元格 单元格 单元格 单元格

Markdown 区块

区块引用

  • 需在行首放置1个>

区块引用

区块嵌套引用

  • 需在行首放置多个>

最外层

第一层嵌套

第二层嵌套

区块中使用列表

  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_here_url]

[Markdown_Here_url]:https://markdown-here.com

Markdown 图片

一般图片链接

![alt 属性文本](图片地址)

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

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

![梦幻之心星](//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvU2t5LXNlZWtlci9QaWN0cnVlX0JlZC9pbWcvZHJlYW0tc2Vla2VyLmpwZw==.jpg)

![梦幻之心星](//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvU2t5LXNlZWtlci9QaWN0cnVlX0JlZC9pbWcvZHJlYW0tc2Vla2VyLmpwZw==.jpg '梦幻之心星'))

![梦幻之心星](//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvU2t5LXNlZWtlci9QaWN0cnVlX0JlZC9pbWcvZHJlYW0tc2Vla2VyLmpwZw==.jpg "梦幻之心星")

Markdown语法说明及测试一览表

Markdown语法说明及测试一览表

Markdown语法说明及测试一览表

高级链接

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

[图片地址变量]: 图片地址

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

![梦幻之心星][Sky-seeker_url]

[Sky-seeker_url]: //bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvU2t5LXNlZWtlci9QaWN0cnVlX0JlZC9pbWcvZHJlYW0tc2Vla2VyLmpwZw==.jpg

Markdown语法说明及测试一览表

![梦幻之心星][Sky-seeker_url]

[Sky-seeker_url]: //bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvU2t5LXNlZWtlci9QaWN0cnVlX0JlZC9pbWcvZHJlYW0tc2Vla2VyLmpwZw==.jpg

Markdown 高级技巧

支持的 HTML 元素:

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

    <kbd> <b> <i> <em> <sup> <sub> <br>等。
  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`

```mermaid

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

  1. 脚注的内容 ︎

相关文章