Markdown 语法精选

前端开发
2020年09月14日
1529

行内语法

注释

HTML注释法

markdown支持html语法,所以我们可以直接像HTML那样使用<!-- -->来完成文档中的注释操作.

html
<!-- HTML注释法 -->

代码注释法

html
<div style="display: none">这是代码注释法</div>
这是代码注释法

hack方法

hack方法是利用markdown解析原理来实现注释的。

有些markddown解析器不支持上面两种方法,这时候就可以使用hack方法。

hack方法比上面两种方法稳定得多,但语义化太差。

plain-text
[//]: #(这里是注释内容) [^_^]: # (这里是注释内容) [//]: <> (这里是注释内容) [comment]: <> (这里是注释内容)

标题

plain-text
# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题

任务列表

plain-text
+ [ ] 这是未完成的任务 + [x] 这是已完成的任务
  • 任务一 未做任务 - []
  • 任务二 已做任务 - [x]

缩进、换行、空行、对齐方式

  • 首行缩进

    不同的占位符所占的空白位置不一样&emsp; &ensp; &nbsp;

  • 换行

    在一行字后面加上两个空格(VS Code中)、有些markdown编辑器可以直接回车来实现换行

  • 空行

    在编辑的时候,无论有多少个空行,只要没有除回车或space之外的其它字符,在渲染的时候都当作一行处理

  • 对齐方式

    html
    <center>居中对齐</center> <p align="left">左对齐</p> <p align="right">右对齐</p>

斜体、粗体、删除线、下划线、背景高亮

  • 这是一段斜体文本 *文本*

  • 这是粗体文本 **文本**

  • 这是加粗的斜体 ***文本***

  • 这里是删除线 ~~文本~~

  • 这里是下划线 ++文本++

  • 背景高亮 ==文本==

超链接、页内链接、自动链接、注脚

行内式

[text](link title)

[这里是一个超链接](https://www.humandetail.com/ "这是链接的title,可选,与link之间有个空格")

这里是一个超链接

参考式

学术引用、参考引用等引用方式百度一下,你就知道Google

plain-text
我经常去的几个网站[百度一下,你就知道][1]、[Google][2] [1]:https://www.baidu.com/ [2]:https://www.google.com/

注脚

使用markdown[1]可以效率地书写文档,直接转换成HTML[2]

plain-text
使用markdown[^1]可以效率地书写文档,直接转换成HTML[^2] [^1]:Markdown是一种纯文本标记语言 [^2]:HyperText Markup Language 超文本标记语言

锚点

网页中,锚点其实就是页内超链接,也就是链接本文档内部的某些元素,实现当前页面中的跳转。比如我这里写下一个锚点,点击回到目录,就能跳转到目录。 在目录中点击这一节,就能跳过来。还有下一节的注脚。这些根本上都是用锚点来实现的,只支持在标题后插入锚点,其它地方无效。

plain-text
## 0. 目录{#index}

跳转到## 0. 目录{#index}

自动链接

plain-text
<http://www.baidu.com/>

http://www.baidu.com

无序列表、有序列表、定义型列表

无序列表

  • 无序列表
  • 使用*+-都可以定义无序列表

有序列表

  1. 有序列表
  2. 使用数字接一个英文的句号

定义型列表

语法说明:

定义型列表由名词和解释组成。一行写上定义,紧跟一行写上解释。解释的写法:紧跟一个缩进(Tab)

代码

plain-text
: 轻量级文本标记语言(左侧有一个可见的冒号和四个不可见的空格)

显示效果:

Markdown
轻量级文本标记语言,可以转换成html,pdf等格式

图像

plain-text
![图像的alt](图像的链接地址 “图像的标题”)

这是一张来自百度的图片

多级引用

plain-text
>>> 请问Markdown怎么用? - 小白 >> 自己看教程! - 愤青 > 教程在哪? - 小白

请问Markdown怎么用? - 小白

自己看教程! - 愤青

教程在哪? - 小白

转义字符、字体、字号、颜色

转义字符

Markdown中同样是使用\来转义字符,需要转义的字符有:

plain-text
\ ` * _ {} [] () # + - . !

字体、字号、颜色

不推荐使用这些方式

html
<center> <font face="黑体">我是黑体字</font> <font face="微软雅黑">我是微软雅黑</font> <font face="Simsun">我是宋体</font> <font face="黑体" color="#0098ff" size=12>我是黑体字</font> <font face="黑体" size=10>我是黑体字</font> </center>
我是黑体字 我是微软雅黑 我是宋体 我是黑体字 我是黑体字

块语法

内容目录

在段落中填写[TOC]即可显示全文内容的目录结构

代码块

plain-text
​``` 这里是代码 ​``` ​```语言 这里是代码 ​``` `行内代码`

流程图

graphviz语法教程

代码:

plain-text
​```graphviz digraph G { A -> B; A -> C -> B; A -> D -> B; } ​``` ​```graphviz digraph G { size = "4, 4"; main [shape=box]; /* 这是注释 */ main -> parse [weight=8]; parse -> execute; main -> init [style=dotted]; main -> cleanup; execute -> { make_string; printf} init -> make_string; edge [color=red]; // 设置生效 main -> printf [style=bold,label="100 times"]; make_string [label="make a\n字符串"]; node [shape=box,style=filled,color=".7 .3 1.0"]; execute -> compare; } ​```

效果:

graphviz
digraph G { A -> B; A -> C -> B; A -> D -> B; }
graphviz
digraph G { size = "4, 4"; main [shape=box]; /* 这是注释 */ main -> parse [weight=8]; parse -> execute; main -> init [style=dotted]; main -> cleanup; execute -> { make_string; printf} init -> make_string; edge [color=red]; // 设置生效 main -> printf [style=bold,label="100 times"]; make_string [label="make a\n字符串"]; node [shape=box,style=filled,color=".7 .3 1.0"]; execute -> compare; }

表格

plain-text
|学号|姓名|性别| |-|-|-| |0001|小明|男| |0002|小红|女|
学号 姓名 性别
0001 小明
0002 小红

LaTeX 公式

  • $E = mc^2$

    plain-text
    `$E = mc^2$`
  • @(1/2[1-(1/2)^n])/(1-(1/2))=s_n@

    plain-text
    @(1/2[1-(1/2)^n])/(1-(1/2))=s_n@

分隔线

plain-text
*** * * * **** - - - ____

原始码

在代码块中,&<>会自动转换成HTML实体。

特殊字符

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
°C 摄氏度 &deg;C
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方(上标²) &sup2
³ 立方(上标³) &sup3

  1. Markdown是一种纯文本标记语言 ↩︎

  2. HyperText Markup Language 超文本标记语言 ↩︎