Markdown超详细使用说明

5,898 阅读11分钟

原文地址:点击查看

内容摘要

介绍了Markdown的来源,使用场景,并以丰富的示例,详细介绍了Markdown的各种语法,帮助大家更好的使用Markdown。
如果您觉得有用,也欢迎将本文推荐给您的朋友。

什么是Markdown

Markdown是一种轻量级标记语言,通过纯文本的方式编写文档,然后再通过工具转化成HTML,PDF,图片等格式,实现Write Once,Read Everywhere的效果。 更详细的定义参见维基百科

Markdown示意图:

使用Markdown的好处是什么呢

Markdown是一种纯文本标记语言,那么纯文本标记语言有什么好处呢?

  1. 方便编辑。任何一个文本编辑器就可以编辑,连大家熟悉的Windows记事本也可以。让编写者专注于内容,而不是格式。是否有为了调整不听话的编辑器(好吧,我说的就是word)的格式而浪费大量时间的经历?
  2. 可以放到版本管理系统中,追踪历史变更。这对码农们来说太重要了,这样文档可以和程序代码一起放版本管理系统中了。如果你不清楚版本管理系统,只需要把它理解成可以永久追踪的修改历史记录即可(版本管理系统可以另开一篇文章了)。这样,多人协作编辑的时候,也不用担心文档被改坏了。

要把时间放在制造优质内容上,而不是调整文档格式。(想起了多年前做研究生论文的时候。。。)

Markdown的历史

Markdown由John Gruber在2004年创建。其中在语法上有很大一部分是跟Aaron Swartz共同合作的。

Aaron Swartz就是那位于2013年自杀,有着开挂一般人生经历的程序员。维基百科对他的介绍是:软件工程师、作家、政治组织者、互联网活动家、维基百科人

他有着足以让你跪拜的人生经历:

  • 14岁参与RSS 1.0规格标准的制订。
  • 2004年入读斯坦福,之后退学。
  • 2005年创建Infogami,之后与Reddit合并成为其合伙人。
  • 2010年创立求进会(Demand Progress),积极参与禁止网络盗版法案(SOPA)活动,最终该提案居然被撤回。
  • 2011年7月19日,因被控从MIT和JSTOR下载480万篇学术论文并以免费形式上传于网络被捕。
  • 2013年1月自杀身亡。
Aaron Swartz

天才都有早逝的归途(又是一位犹太人)。

Markdown的用途

  • 论坛或博客
  • gitbook
  • 邮件
  • 学术论文
  • 等等

Markdown能用在哪些地方

  • GitHub
  • 简书
  • Stack Overflow
  • Apollo
  • Moodle
  • Reddit
  • 等等

Markdown语法详解

标题:使用 # 标记标题

使用 # 号可标记1 - 6级标题,一级标题对应 1 个 # 号,二级标题对应 2 个 # 号,以此类推。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

显示效果如下:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

段落格式及字体

段内换行和段落之间

段落内的换行使用 2 个以上空格加上回车;也可以在段落后面使用一个空行来表示重新开始一个段落。

这是第一段的第1行    <--末尾添加至少2个空格
这是第一段的第2行
(空行)
这是第二段
(空行)
这是第三段

显示效果如下: 这是第一段的第1行
这是第一段的第2行

这是第二段

这是第三段

字体

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

显示效果如下:

斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本

字号及颜色

<font size=1>大小为1的字体</font>
<font size=6>大小为6的字体</font>

<font color=gray size=4>gray颜色的字</font>
<font color=green size=4>green颜色的字</font>
<font color=hotpink size=4>hotpink颜色的字</font>
<font color=LightCoral size=4>LightCoral颜色的字</font>
<font color=LightSlateGray size=4>LightSlateGray颜色的字</font>
<font color=orangered size=4>orangered颜色的字</font>
<font color=red size=4>red颜色的字</font>
<font color=springgreen size=4>springgreen颜色的字</font>
<font color=Turquoise size=4>Turquoise颜色的字</font>

显示效果如下:(如这里看不到效果,说明此网站Markdown实现不支持插入HTML标签)

大小为1的字体
大小为6的字体
gray颜色的字
green颜色的字
hotpink颜色的字
LightCoral颜色的字
LightSlateGray颜色的字
orangered颜色的字
red颜色的字
springgreen颜色的字
Turquoise颜色的字

分隔线

有多种方法都可以建立分隔线:3个以上的星号,3个以上的减号,3个以上的下划线,也可以在星号、减号、下划线中间插入空格,这几种方式都可以建立分隔线。

***
* * *
******
- - -
_ _ _

显示效果如下:






删除线

我没有删除线
我也没有删除线
~~我有删除线~~

显示效果如下:

我没有删除线
我也没有删除线
我有删除线

下划线

Markdown中并无下划线的原生语法,可以通过HTML的<u>标签来实现。

<u>我带下划线</u>

显示效果如下:

我带下划线

脚注

脚注是对文本的补充说明。

[^要注明的文本]

示例:

创建脚注格式类似这样 [^Markdown]。
[^Markdown]: 这是一个脚注

显示效果如下:

创建脚注格式类似这样[1]

Markdown列表

无序列表

无序列表使用星号,加号或是减号作为标记。

* 列表项1
* 列表项2

+ 列表项1
+ 列表项2

- 列表项1
- 列表项2

显示效果如下:

  • 列表项1
  • 列表项2
  • 列表项1
  • 列表项2
  • 列表项1
  • 列表项2

有序列表

有序列表使用数字加上 . 号来表示,注意 . 号和实际内容之间需要加一个空格。

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

显示效果如下:

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

列表嵌套

列表嵌套只需要在子列表选项的前面添加 4 个空格即可。

* 无序列表1
    1. 有序列表1.1
    2. 有序列表1.2
* 无序列表2
    - 无序列表2.1
    - 无序列表2.2
  • 无序列表1
    1. 有序列表1.1
    2. 有序列表1.2
  • 无序列表2
    • 无序列表2.1
    • 无序列表2.2

Markdown区块

区块使用 > 符号,后面加上一个空格。

> 区块
> Markdown
> 用Markdown写文章,爽!

显示效果如下:

区块 Markdown 用Markdown写文章,爽!

区块嵌套:每一层嵌套加上 > 符号和空格

> 区块
> > 嵌套1
> > > 嵌套2

显示效果如下:

区块

嵌套1

嵌套2

Markdown代码

行内函数或代码片段,直接使用反引号即可。注意这里的反引号是键盘左上角的那个键,一般在esc键下面。

`print("hello, world")`函数

显示效果如下:

print("hello, world")函数

代码区块1

代码区块使用 4 个空格或 1 个制表符(Tab)

    <?php
      function test() {
        echo 'hello, world';
      }
      test()
    ?>          

显示效果如下:

<?php
    function test() {
        echo 'hello, world';
    }
    test()
?>

代码区块2

也可以使用```包裹一段代码,并指定一种语言(也可以不指定)。

​```java
public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("hello, world");
	}
}
​```

显示效果如下:

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("hello, world");
	}
}

链接

链接的使用方法:

[链接名称][链接地址]

或者

<链接地址>

例如:

[SanFeng的网络日志](http://blog.kfzhang.cn)
或
<http://blog.kfzhang.cn>

显示效果如下:

SanFeng的网络日志

或者直接使用链接地址:

blog.kfzhang.cn

高级用法

链接也可以用变量来替代,文档末尾附带变量地址(下面的blog和home都是变量):

[访问博客请点击][blog]
[访问首页请点击][home]
[blog]: http://blog.kfzhang.cn
[home]: http://www.kfzhang.cn

显示效果如下:
访问博客请点击
访问首页请点击

图片

Markdown图片语法格式如下:

开头一个感叹号!
接着一个方括号,里面放上图片的替代文字
接着一个普通括号里面放上图片的地址,最后还可以用引号包住并加上选择性的'title'属性的文字

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

例:

![logo](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/24/16f36a2574c9899c~tplv-t2oaga2asx-image.image)
![logo](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/24/16f36a2574c9899c~tplv-t2oaga2asx-image.image logo)

logo

logo
logo

高级用法

跟链接的用法类似,也可以像网址那样对图片地址使用变量。

链接也可以用变量来替代,文档末尾附带变量地址:

![logo][1]
[1]: https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/24/16f36a2574c9899c~tplv-t2oaga2asx-image.image

logo

扩展用法

原生Markdown不支持调整图片的高度、宽度等参数,可以使用<img>标签,当然并不是所有的Markdown实现都支持这种用法,实测为准。

<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/24/16f36a2574c9899c~tplv-t2oaga2asx-image.image" width=10%>

显示效果如下:(如这里看不到效果,说明此网站Markdown实现不支持插入HTML标签)

表格

Markdown表格使用 | 来分隔单元格,使用 - 来分隔表头和其它行。

| 表头 | 表头 |
| --- | --- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |

显示效果如下:

表头 表头
单元格 单元格
单元格 单元格

对齐方式

可以设置表格的对齐方式:

-: 设置内容和标题栏右对齐
:- 设置内容和标题栏左对齐
:-: 设置内容和标题栏居中对齐

示例:

| 左对齐 | 右对齐 | 居中对齐 |
| :---- | ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

显示效果如下:

左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

高级技巧 - HTML元素

支持HTML元素

不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。 目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等。 示例:

使用 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> 来重启电脑   
<b>加粗的字体</b>   
<i>斜体字</i>
<em>强调文本</em>
这个文本包含<sup>上标</sup>文本
这个文本包含<sub>下标</sub>文本
使用 br 元素<br>在文本中<br>换行

显示效果如下:(如这里看不到效果,说明此网站Markdown实现不支持插入HTML标签)
使用 Ctrl + Alt + Del 来重启电脑
加粗的字体
斜体字
强调文本
这个文本包含上标文本
这个文本包含下标文本
使用 br 元素
在文本中
换行

高级技巧 - 转义

Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符。 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}

更详细的数学公式请参考Markdown中Latex数学公式基本语法

常见的Markdown软件

本文主要关注Markdown的使用,对常见的Markdown工具及软件就不详细描述了,如有兴趣请参见:简单易懂Markdown工具篇

就个人的喜好和使用经验来讲,强烈推荐Typora,支持多平台包括Win,Mac,Linux,真的非常好用。


参考文献:

标题 地址
Markdown教程 www.runoob.com/markdown/md…
让文档回归本质,为什么应该用Markdown jolestar.com/markdown-to…
Markdown语法全解 blog.csdn.net/jk_chen_acm…
Markdown中Latex数学公式基本语法 blog.csdn.net/u014630987/…

  1. 这是一个脚注 ↩︎