Demo

Markdown介绍

Markdown是一种轻量级的标记语言，使用普通的文本编辑器，通过简单的标记语法，就可以实现漂亮的排版，被越来越多的写作爱好者、程序员所使用。Markdown自成格式，不依赖任何编辑器，且易于传播，其语法十分简单，通过几分钟的简单学习，就可以实现基本的排版，然后专注于码字。
Markdown具有一系列衍生版本，用于扩展Markdown的功能（如表格、脚注、内嵌HTML等等），这些功能原初的Markdown尚不具备，它们能让Markdown转换成更多的格式，例如LaTeX，Docbook。Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具，如Pandoc；要么基于网站，如GitHub和Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。

为什么选择Markdown

• 极简主义、避免许多烦杂功能
• 比起使用word更简单快速
• 学习难度极低、易读易写
• 支持跨平台使用，兼容HTML格式
• 更清晰的组织文档的结构
• 写作中添加简单符号即完成排版，所见即所得。让你专注于文字而不是排版
• 可以通过HTML和CSS扩展渲染多种样式，实现一键排版
• 格式转换方便，Markdown 的文本你可以轻松转换为 html、pdf等
• 可以保存称纯文本

唯一原文链接：https://www.cnblogs.com/kongw/p/10744060.html

编辑器推荐

任何一款文本编辑器都能用于编辑 Markdown 文档，它们分别提供了不同程度的语法高亮、预览等功能，以下只是列举其中一部分，选择自己称手的即可

名称	平台	说明
小书匠编辑器	支持多平台	一个支持离线与在线的markdown文本编辑器,并实现了多种第方三数据存储集成(evernote,印象笔记,github,dropbox等)
dillinger	在线编辑器	在线编辑器|漂亮强大，支持md, html, pdf 文件导出。支持dropbox, onedrive，google drive, github. 来自国外，可能不够稳定
MaHua	在线编辑器	小众软件推荐，界面有些简陋
简书	在线编辑器	一个很不错的博客平台，每几秒钟便会自动存入一个备份。可以直接从本地拖入照片生成链接，一直在不断优化。作为一个博客平台，需要注册账号后方能进行写作
Cmd Markdown	支持多平台	便捷更高效的记录思想，整理笔记、知识，并将其中承载的价值传播给他人的工具
马克飞象	Chrome插件	英文名Marxico, 因为印象笔记不支持Markdown，而这款可以直接把文本存到印象笔记的编辑器对于重度印象笔记用户是个不错的选择。付费软件，可以免费试用。
FarBox	支持多平台	让用户通过Dropbox（现在默认是自己的同步服务器）直接建立个人网站。FarBox编辑器免费，支持多平台（无web版，Linux版停止维护）,Farbox服务可以免费试用，在本地编辑器内写作自动同步发布在个人博客，对希望有个人博客但却不愿折腾的小白来说，是个不错的选择。
Sublime Text 2	支持多平台	界面简约大方，定位专业。可以免费试用，价格稍贵，70美元
Atom	支持多平台	github出的编辑器；功能十分强大，支持各种编程语言；安装后会在添加右键菜单，图标丑；全平台，程序猿专用
MarkdownPad	Windows	一款全功能的编辑器，被很多人称赞为windows 平台最好用的markdown编辑器
Smark	Windows	开源软件
MdCharm	Windows, Linux	功能完备；长相一般，隐藏菜单栏后也算简约。有Windows 和Linux版本。目前已开源，不再更新。
Miu	Windows	一款模仿mou 的windows平台markdown编辑器，小众推荐，必属精品，官网无法打开，好在小众提供了百度云下载。界面美观，功能不够成熟
Mou	OS X平台	似乎提到 Mac 和 MD ,接下来的词一定是Mou，因为他们是一个姓么
Typora	OS X平台	有出Windows 和Linux版本的计划
MacDown	OS X平台	开源免费
Byword	OS X平台	支持OS X, iOS 售价78元
iA Writer	OS X平台	支持OS X , iOS 及Android，未优化中文显示，知乎此问题中很多人认为 Byword比 iA 好 。售价68，pro版本128元
Ulysses	OS X平台	支持OS X , iPad, 少数派有一篇专门的文章介绍，售价 283元
Typed	OS X平台	少数有关于派测评：情怀与功能不可兼得，极简 Markdown 写作软件： Typed ，售价128元。
MarkdownX	Android	手机即可编辑预览

查看更多选择

markdown语法规范

---

⭐标题

这是最为常用的格式，在平时常用的的文本编辑器中大多是这样实现的：输入文本、选中文本、设置标题格式。
Markdown代码:

这是一个一级标题
==========
这是一个二级标题
----------
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

语法说明：第一种方式好像只能表示一级和二级标题，而且=和-的数量没有限制，只要大于一个就行
第二种前面带#号，后面带文字，分别表示h1-h6
预览效果:

---

⭐列表

1.有序列表和无序列表

Markdown代码:

- 苹果
- 葡萄
- 榴莲

1. 苹果
2. 葡萄
3. 榴莲

语法说明：有序列表和无序列表，注意在-之后需要有一个空格，其中无序列表的标记可以使用 +、- 或 *，有序列表前的数字可以是乱序的
预览效果:

• 苹果
• 葡萄
• 榴莲

1. 苹果
2. 葡萄
3. 榴莲

在特殊情况下，项目列表很可能会不小心产生，像是下面这样的写法

	1986. What a great season.

会显示成：

1. What a great season.

换句话说，也就是在行首出现数字-句点-空白，要避免这样的状况，你可以在句点前面加上反斜杠

	1986. What a great season.

2.定义型列表

Markdown代码:

Markdown
:    轻量级文本标记语言，可以转换成html，pdf等格式（左侧有一个可见的冒号和四个不可见的空格）

代码块 2
:   这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）
        代码块（左侧有八个不可见的空格）

语法说明：定义型列表由名词和解释组成。一行写上定义，紧跟一行写上解释。解释的写法:紧跟一个缩进(Tab)
预览效果:
Markdown
: 轻量级文本标记语言，可以转换成html，pdf等格式（左侧有一个可见的冒号和四个不可见的空格）

代码块 2

这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）

  代码块（左侧有八个不可见的空格）

---

⭐斜体和粗体

Markdown代码:

*斜体*或_斜体_
**粗体**
***加粗斜体***
~~删除线~~
<span style="color:red">红色</span>

预览效果:
斜体或_斜体_
粗体
加粗斜体
删除线
红色

---

⭐超链接

1.行内式超链接

Markdown代码:

打开百度[百度一下](http://www.baidu.com)
打开百度[百度一下](http://www.baidu.com title="百度一下")

语法说明：[]里写链接文字，()里写链接地址, ()中的”“中可以为链接指定title属性，title属性可加可不加。title属性的效果是鼠标悬停在链接上会出现指定的 title文字。[链接文字](链接地址 “链接标题”)’这样的形式。链接地址与链接标题前有一个空格。
预览效果:
打开百度百度一下
打开百度百度一下

2.参考式超链接

Markdown代码:

我经常去的几个网站[Google][1]、[Leanote][2]以及[自己的博客][3]
[Leanote 笔记][2]是一个不错的[网站][]。

[1]:http://www.google.com "Google"
[2]:http://www.leanote.com "Leanote"
[3]:http://http://blog.leanote.com/freewalk "梵居闹市"
[网站]:http://http://blog.leanote.com/freewalk

语法说明：参考式超链接一般用在学术论文上面，或者另一种情况，如果某一个链接在文章中多处使用，那么使用引用 的方式创建链接将非常好，它可以让你对链接进行统一的管理。

参考式链接分为两部分，文中的写法 [链接文字][链接标记]，在文本的任意位置添加[链接标记]:链接地址 “链接标题”，链接地址与链接标题前有一个空格。

如果链接文字本身可以做为链接标记，你也可以写成[链接文字][]
[链接文字]：链接地址的形式，见代码的最后一行
预览效果:
我经常去的几个网站Google、Leanote以及自己的博客
Leanote 笔记是一个不错的网站。

3.自动链接

Markdown代码:

<http://example.com/>
<address@example.com>

语法说明：Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用<>包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样
预览效果:
http://example.com/
address@example.com

---

⭐锚点

Markdown代码:

#### 0. 目录{#index}
跳转到[目录](#index)

语法说明：在你准备跳转到的指定标题后插入锚点{#标记}，然后在文档的其它地方写上连接到锚点的链接。网页中，锚点其实就是页内超链接，也就是链接本文档内部的某些元素，实现当前页面中的跳转。比如我这里写下一个锚点，点击回到目录，就能跳转到目录。 在目录中点击这一节，就能跳过来。还有下一节的注脚。这些根本上都是用锚点来实现的。
注意：

1. Markdown Extra 只支持在标题后插入锚点，其它地方无效。
2. Leanote 编辑器右侧显示效果区域暂时不支持锚点跳转，所以点来点去发现没有跳转不必惊慌，但是你发布成笔记或博文后是支持跳转的。

预览效果:

0. 目录{#index}

跳转到目录

⭐引用

Markdown代码:

> 这是一个有两段文字的引用,
> 无意义的占行文字1.
> 无意义的占行文字2.
> 
> 无意义的占行文字3.
> 无意义的占行文字4.

语法说明：引用需要在被引用的文本前加上>符号。
预览效果:

这是一个有两段文字的引用,
无意义的占行文字1.
无意义的占行文字2.

无意义的占行文字3.
无意义的占行文字4.

Markdown 也允许你偷懒只在整个段落的第一行最前面加上 >
Markdown代码:

> 这是一个有两段文字的引用,
无意义的占行文字1.
无意义的占行文字2.
> 无意义的占行文字3.
无意义的占行文字4.

预览效果:

这是一个有两段文字的引用,
无意义的占行文字1.
无意义的占行文字2.
无意义的占行文字3.
无意义的占行文字4.

引用还可以嵌套使用
Markdown代码:

>>> 请问 Markdwon 怎么用？ - 小白

>> 自己看教程！ - 愤青

> 教程在哪？ - 小白

预览效果:

请问 Markdwon 怎么用？ - 小白

自己看教程！ - 愤青

教程在哪？ - 小白

Markdown代码:

> 引用块段落一。
>
> 引用块段落二。
>> 内嵌引用块段落一。
>
> ### 引用块内的标题

预览效果:

引用块段落一。

引用块段落二。

内嵌引用块段落一。

引用块内的标题

如果要在列表项目内放进引用，那 > 就需要缩进：
Markdown代码:

*   阅读的方法:
    > 打开书本。
    > 打开电灯。

预览效果:

• 阅读的方法:

  打开书本。
  打开电灯。

包含代码区块的引用

Markdown代码:

- 一列表项包含一个列表区块：

		<代码写在这>

语法说明：如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符
预览效果:

• 一列表项包含一个列表区块：

    <代码写在这>
  

---

⭐插入代码

Markdown代码:

	```
	function MaxNum(x1,x2){
	    if(x1>=x2) return x1;
	    else return x2;
	}
	```

语法说明：插入程序代码的方式有两种，一种是利用缩进(Tab),另一种代码前后各加键盘的Tab键上面的那个按钮的符号三次；插入行内代码，即插入一个单词或者一句代码的情况，使用code这样的形式插入。
预览效果:

function MaxNum(x1,x2){
	if(x1>=x2) return x1;
	else return x2;
}

行内代码:

啦啦啦<code>代码</code>额

预览效果:
啦啦啦代码额

直接插入HTML 原始码

在代码区块里面， & 、 < 和 > 会自动转成 HTML 实体，这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码，只需要复制贴上，剩下的 Markdown 都会帮你处理
例1：
Markdown代码:

<div class="footer">
   © 2004 Foo Corporation
</div>

预览效果:

© 2004 Foo Corporation

例2： Markdown代码: ```

值班人员	星期一	星期二	星期三
	李强	张明	王平

``` 预览效果:

值班人员	星期一	星期二	星期三
	李强	张明	王平

---

⭐插入图像

图片的创建方式与超链接相似，而且和超链接一样也有两种写法，行内式和参考式写法。
语法中图片Alt的意思是如果图片因为某些原因不能显示，就用定义的图片Alt文字来代替图片。 图片Title则和链接中的Title一样，表示鼠标悬停与图片上时出现的文字。 Alt 和 Title 都不是必须的，可以省略，但建议写上。

行内式

Markdown代码:

二次元图片： 
![二次元图片](https://www.cnblogs.com/images/cnblogs_com/kongw/1443152/o_back1.png "二次元图片")

语法说明：

![图片Alt](图片地址 “图片Title”)

预览效果:
二次元图片：

参考式

Markdown代码:

二次元图片：
![二次元图片][pic]
[pic]:https://www.cnblogs.com/images/cnblogs_com/kongw/1443152/o_back1.png  "二次元图片"

语法说明：

在文档要插入图片的地方写![图片Alt][标记]
在文档的最后写上[标记]:图片地址 “Title”

预览效果:
二次元图片：

---

⭐注脚

Markdown代码:

使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Leanote[^Le] 编辑器进行书写。
[^1]:Markdown是一种纯文本标记语言
[^2]:HyperText Markup Language 超文本标记语言
[^Le]:开源笔记平台，支持Markdown和笔记直接发为博文

语法说明：
在需要添加注脚的文字后加上脚注名字[^注脚名字],称为加注。 然后在文本的任意位置(一般在最后)添加脚注，脚注前必须有对应的脚注名字。
注意：经测试注脚与注脚之间必须空一行，不然会失效。成功后会发现，即使你没有把注脚写在文末，经Markdown转换后，也会自动归类到文章的最后。
预览效果:
使用 Markdown<sup>[1]</sup>可以效率的书写文档, 直接转换成 HTML<sup>[2]</sup>, 你可以使用 Leanote<sup>[3]</sup> 编辑器进行书写。

⭐插入公式

Markdown代码:

行内公式$sqrt{3x-1}+(1+x)^2$，
行公式:
$$
sqrt{3x-1}+(1+x)^2
$$

---
$$sum_{i=1}^n a_i=0$$
$$f(x_1,x_x,ldots,x_n) = x_1^2 + x_2^2 + cdots + x_n^2 $$
$$sum^{j-1}_{k=0}{widehat{gamma}_{kj} z_k}$$

语法说明：
LaTeX数学公式, $$ 表示整行公式 （博客园中需要在后台，选项里面打开启用数学公式支持）
预览效果:
行内公式(sqrt{3x-1}+(1+x)^2)，
行公式:

[sqrt{3x-1}+(1+x)^2 ]

---

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

[f(x_1,x_x,ldots,x_n) = x_1^2 + x_2^2 + cdots + x_n^2 ]

[sum^{j-1}_{k=0}{widehat{gamma}_{kj} z_k} ]

---

⭐添加段落

Markdown代码:

#### MarkDown有什么好处？
MarkDown的好处是纯文本排版，文本本身就有很强的结构化效果，即使只是在Notepad里写MarkDown，不用任何渲染，你也能看出层次结构来。比如，在QQ、微信里，你发个MarkDown的文本，别人准能看的出其中的结构层次来，这就是文本结构本身的效果。当然，如果你需要高级一点的渲染效果，随便找个支持MarkDown渲染的站点渲染下，再导出成HTML或者PDF都是很好的。博客类，像博客园都已经支持MarkDown渲染了。而临时渲染工具，像这个站点：[stackeditor](http://stackedit.io/editor)就可以直接贴上你在本地Notepad里编辑好的文本，右侧就可以看到渲染效果，你可以选择导出成纯文本、HTML、或者PDF。这个站点导出PDF是要注册帐号的，但也有办法绕过去，比如你导出带样式的HTML，然后用Chrome浏览器打开，右键打印，保存PDF，就能做到一样的效果。

语法说明：并没有特别MarkDown符号标记一段文本是段落，然而，许多人在学习了MarkDown之后，会误用列表、引用、代码段去排版段落，所以这里特别提一下。在MarkDown里面，没有任何修饰的文本就是段落
预览效果:

MarkDown有什么好处？

MarkDown的好处是纯文本排版，文本本身就有很强的结构化效果，即使只是在Notepad里写MarkDown，不用任何渲染，你也能看出层次结构来。比如，在QQ、微信里，你发个MarkDown的文本，别人准能看的出其中的结构层次来，这就是文本结构本身的效果。当然，如果你需要高级一点的渲染效果，随便找个支持MarkDown渲染的站点渲染下，再导出成HTML或者PDF都是很好的。博客类，像博客园都已经支持MarkDown渲染了。而临时渲染工具，像这个站点：stackeditor就可以直接贴上你在本地Notepad里编辑好的文本，右侧就可以看到渲染效果，你可以选择导出成纯文本、HTML、或者PDF。这个站点导出PDF是要注册帐号的，但也有办法绕过去，比如你导出带样式的HTML，然后用Chrome浏览器打开，右键打印，保存PDF，就能做到一样的效果。

---

⭐插入表格

语法说明：

• 不管是哪种方式，第一行为表头，第二行分隔表头和主体部分，第三行开始每一行为一个表格行。
• 列于列之间用管道符|隔开。原生方式的表格每一行的两边也要有管道符。
• 第二行还可以为不同的列指定对齐方向。默认为左对齐，在-右边加上:就右对齐。
  简单方式写表格：
  Markdown代码:

学号|姓名|分数
-|-|-
小明|男|75
小红|女|79
小陆|男|92

预览效果:

学号	姓名	分数
小明	男	75
小红	女	79
小陆	男	92

原生方式写表格：
Markdown代码:

|学号|姓名|分数|
|-|-|-|
|小明|男|75|
|小红|女|79|
|小陆|男|92|

预览效果:

学号	姓名	分数
小明	男	75
小红	女	79
小陆	男	92

为表格第二列指定方向：
Markdown代码:

产品|价格
-|-:
Leanote 高级账号|60元/年
Leanote 超级账号|120元/年

预览效果:

产品	价格
Leanote 高级账号	60元/年
Leanote 超级账号	120元/年

---

⭐分隔线

Markdown代码:

* * *
***
*****
- - -
---------------------------------------

语法说明：你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。
预览效果都一样:

---

⭐内容目录

语法说明：在文章开始地方输入【TOC】（中括号换成英文的），即可在对应位置插入目录，注意：凡是文章标题带有#（1-6个）的都会被捕获到目录中

用 Markdown 做 PPT

有专门的工具 Marp，另外使用 VSCode + 插件 Markdown Preview Enhanced 也可以实现。

用 Markdown 写微信公众号

可以将公众号素材用 Markdown 编辑好后，贴到在线排版工具以后，复制到公众号编辑器里即可。有多种页面主题和代码主题可选择。

快捷键（[StackEdit][6]）

• 加粗 Ctrl + B
• 斜体 Ctrl + I
• 引用 Ctrl + Q
• 插入链接 Ctrl + L
• 插入代码 Ctrl + K
• 插入图片 Ctrl + G
• 提升标题 Ctrl + H
• 有序列表 Ctrl + O
• 无序列表 Ctrl + U
• 横线 Ctrl + R
• 撤销 Ctrl + Z
• 重做 Ctrl + Y

参考文献：
百度百科https://baike.baidu.com/item/markdown#3
维基百科https://zh.wikipedia.org/wiki/Markdown
witnessai1https://blog.csdn.net/witnessai1/article/details/52551362
yllifesonghttps://blog.csdn.net/yllifesong/article/details/81041312
mzloginhttps://blog.csdn.net/mzlogin/article/details/82530240
d细蚊仔bhttps://www.jianshu.com/p/7771794c88a1
fflhttp://www.cnblogs.com/math/p/se-tools-001.html
倾启君https://www.jianshu.com/p/5d91aac9ea16
感谢各位大佬们提供的资料

---

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

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

3. 开源笔记平台，支持Markdown和笔记直接发为博文 ↩︎