MD | About Markdown

文章目录

1. 认识 Markdown
- 1.1 Markdown的优点
- 1.2 Markdown 的现状
- 1.3 Markdown官方文档
2. 使用Markdown
- 2.1 标题
- 2.2 加粗、斜体和删除线
- 2.3 列表
- 2.4 引用
- 2.5 分割线
- 2.6 插入链接
- 2.7 插入图片
- 2.8 表格
- 2.9 角标
- 2.10 上下标
- 2.11 直接链接与邮箱
- 2.12 换行
- 2.13 反斜杠
- 2.14 代码高亮
- 2.15 其他
- - 2.15.1 锚点
  - 2.15.2 空格
  - 2.15.3 图片图床
  - 2.15.4 LaTeX公式
  - - 行内公式（`$`表示）
    - 整行公式（`$$`表示）
  - 2.15.5 流程图、渲染序列图
  - - 流程图
    - 渲染序列图
  - 2.15.6 GitHub Emoji
- 2.16 Markdown的局限性
3. Markdown 工具的选择
- 3.1 Windows 平台
- - 3.1.1 [Sublime](http://www.sublimetext.com/)
  - 3.1.2 [简书](https://www.jianshu.com/)
  - 3.1.3 [Cmd Markdown](https://www.zybuluo.com/cmd/)
  - 3.1.4 [马克飞象](https://maxiang.io)
  - 3.1.5 [为知笔记](http://www.wiz.cn/)
  - 3.1.6 [Simple MarkPad](http://simple-markpad.qiniudn.com/)
  - 3.1.7 [MarkPad](http://code52.org/DownmarkerWPF/)
  - 3.1.8 [Miu](https://github.com/egoist/Miu)
- 3.2 Mac 平台
- - 3.2.1 [Mou](http://25.io/mou/)
  - 3.2.2 [Ulysses](http://www.ulyssesapp.com/)
  - 3.2.3 [Byword](https://bywordapp.com/)
  - 3.2.4 [typora](https://www.typora.io/)
  - 3.2.5 [Quiver](http://happenapps.com/)
  - 3.2.6 [Alternote](http://alternoteapp.com/)
  - 3.2.7 [SnippetsLab](http://www.renfei.org/snippets-lab/)
  - 3.2.8 [MarkdownPad](http://markdownpad.com/)
- 3.3 网页版(线上)
- 3.4 Others
- 3.5 More
4. 推荐阅读
5. 补充

GitHub Pages： https://zhouie.cn/markdown-doc/

1. 认识 Markdown

HTML ( HyperText Markup Language ) 作为一种超文本标记语言 ( Markup Language ) 应运而生，无数的网页从此有了主次分明，层次清晰的格式。
如果将 HTML 比作一架重机枪，那么 Markdown 就是一把手枪，满足了主要的文本格式标记的需求，可是操作性却大大简化。
秉承 易读易写 的宗旨，Markdown 作为一种轻量级标记语言 ( Lightweight Markup Language ) ，让无数的程序猿和文字工作者爱不释手。

1.1 Markdown的优点

专注你的文字内容而不是排版样式，安心写作
轻松的导出 HTML、PDF 和本身的 .md 文件
纯文本内容，兼容所有的文本编辑器与字处理软件
随时修改你的文章版本，不必像字处理软件生成若干文件版本导致混乱
可读、直观、学习成本低

1.2 Markdown 的现状

有时候一件事情的真相，不是来自于对它的思考，而是来自于对它的感觉。
——Stanley Kubrick

这是 John Grumber 最喜欢的用来解释 Markdown 设计初衷的一句话，Markdown 语言希望带来的就是纯粹的写作的感觉，旨在简洁、高效，也由于 Markdown 的易读易写，人们用不同的编程语言实现了多个版本的解析器和生成器。

目前不同的 Markdown 工具集成了不同的功能（但基础功能大致相同），例如 流程图 与 时序图 ，复杂表格 与 复杂公式 的呈现。
我相信随着 Markdown 语法的逐渐普及开来，以后更多的平台会支持 Markdown 书写模式，并集成更加完整的功能模块。

虽然功能的 “丰富” 并没有什么本质的缺点，但这个程度一旦 “过” 了头，终归有些背离初衷，与 “易读易写” 出现矛盾，开始在编写的过程中觉得有些许吃力了。那这个时候，用户可能会觉得，不如使用专业化的工具来撰写更有效率。

1.3 Markdown官方文档

创始人 John Gruber 的 Markdown 语法说明
Markdown 中文版语法说明

了解一下 John Gruber

2004 年 John Gruber创造 Markdown 语言，14年间，Markdown 语言从程序员圈子中逐渐扩散开来，成为了越来越多的电脑写作者第一选择。

John Gruber 是一个资深果粉，他的个人博客 Daring Fireball 被人戏称为苹果官方喉舌博客。所以你应该懂为什么最好的 Markdown 编辑器都集中在 Mac 平台上了吧。

2. 使用Markdown

2.1 标题

Markdown 通过在行首添加 1 ~ 6个 # 符号来定义不同级别的标题，最多到六级标题。
注意：# 后最好是需要加一个空格。

书写格式

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

解析效果

特别的，还可使用 = (高阶标题) 和 - (次阶标题) 标记一级和二级标题。
注意：= 和 - 的个数在不同 Markdown 工具中都有不同，但这倒不是多大的问题了，简单试试就知道了。

书写格式

 效果和一级标题一样=效果和二级标题一样-

解析效果

2.2 加粗、斜体和删除线

markdown使用 * 和 _ 强调文本，使用一个 * 和 _ 包围的文本会被转化为斜体；而用两个 * 和 _ 包围的文本则会被转化成加粗；使用两个~包围的文本会被转化为删除线
但如果你的 * 、_ 和 ~ 两边都有空白的话，它们就只会被当成普通的符号，这其实也是一个需要注意的地方
如果要在文字前后直接插入普通的星号 * 或下划线 _ ，你可以用反斜杠 \ 转义

书写格式

*斜体文字*
_斜体文字_
**加粗文字**
__加粗文字__
~~删除内容~~

解析效果
斜体文字
斜体文字
加粗文字
加粗文字
删除内容

2.3 列表

Markdown支持无序列表和有序列表。
无序列表可以使用 * ， + ， - 三者中任意符号来标记；有序列表则使用 数字 加 . 来标记。
注意：标记后面最好是需要加一个空格，有序列表的数字会被按顺序自动更正。通常情况下，无序列表的项目符号是按照实心圆、空心圆、实心方格的层级关系递进的。

书写格式

有序列表
1. 第一点
2. 第二点
5. 第三点无序列表
- 这是无序列表项目
+ 这是无序列表项目
* 这是无序列表项目嵌套的列表
+ 呵呵* 嘉嘉- 嘻嘻- 吼吼- 嘎嘎+ 桀桀
* 哈哈

解析效果
有序列表
1. 第一点
2. 第二点
3. 第三点
无序列表
- 这是无序列表项目
- 这是无序列表项目
- 这是无序列表项目
嵌套的列表
- 呵呵
  - 嘉嘉
  - 嘻嘻
  - 吼吼
    - 嘎嘎
    - 桀桀
- 哈哈

2.4 引用

在段落前添加一个 > 符号即可将该段落标记为引用
注意： > 后最好是需要加一个空格；>、>> 和 >>> 等多层嵌套的使用，有点不太好总结，不要问我为什么，实践出真知。

书写格式

一般用法
> 这是引用迭代使用（引用中的引用）
> 这是一级引用
>> 这是二级引用
>>> 这是三级引用
>>
>> 这是二级引用
>
> 这是一级引用引用的区块内也可使用其他 Markdown 语法
> **加粗**，*斜体*，~~删除线~~
>
> 1. 这是第一行列表项。
> 3.  这是第二行列表项。
> 5.  这是第三行列表项。
>
> 给出一些例子代码：
>
>     return shell_exec("echo $input | $markdown_script");

解析效果
一般用法

这是引用

迭代使用（引用中的引用）

这是一级引用

这是二级引用

这是三级引用

这是二级引用

这是一级引用

引用的区块内也可使用其他 Markdown 语法
加粗，斜体，删除线
1. 这是第一行列表项。
2. 这是第二行列表项。
3. 这是第三行列表项。
给出一些例子代码：
```
return shell_exec("echo $input | $markdown_script");
```
补充一下
引用区块 > 和代码区块 ````的区别：>引用区块中的文本保留Markdown语法，而 ````代码块中的文本不保留Markdown语法。

2.5 分割线

分割线最常使用就是三个或以上 * ，还可以使用 - 和 _ 。
注意：使用 --- 作为水平分割线时，要在它的前面空一行，防止 --- 被当成标题标记的表示方式。

书写格式
```
***
---
___
```
解析效果

2.6 插入链接

markdown文本中插入链接非常方便，有 文内链接 和 引用链接 两种方式。
注意：
文内链接和引用链接显示效果是一样的，但是在编辑状态下的使用情况不一样。文内链接紧跟链接文字，可以在看到链接文字的同时清楚的知道链接地址，但是不便于多次重复利用。
引用链接可以重复使用，但一般都是将一些链接放在一起统一管理，如一段文字后面或文章结尾，因此在找到链接和链接文字的对应关系上有些麻烦，各有利弊，分情况使用吧。

书写格式

文内链接
这是一个文内链接的[例子](http://example.com/ "鼠标悬浮此处显示的标题")。
[这个](http://example.net/)链接在鼠标悬浮时没有标题。
[这个](/about/)链接是本地资源。引用链接
这是一个引用链接的 [例子][id]，[例子2][]。
[id]: http://example.com/  "鼠标悬浮标题（可选）"
[例子2]: http://example.com/
注意，这里的 id 没有大小写区分，如果省略 id ，则前面方括号的内容会被用作 id 。我常用的网站包括 [Google][1]， [Yahoo][2] 和 [MSN][3] 。
[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"也可以写成我常用的网站包括 [Google][]，[Yahoo][] 和 [MSN][] 。
[google]: http://google.com/        "Google"
[yahoo]:  http://search.yahoo.com/  "Yahoo Search"
[msn]:    http://search.msn.com/    "MSN Search"

解析效果
文内链接
这是一个文内链接的
这是一个链接的例子。
这个链接在鼠标悬浮时没有标题。
这个链接是本地资源。

2.7 插入图片

插入图片和插入链接非常类似，只是在方括号前多一个 ! 。
![Alt text](/path/to/img.jpg "Optional title")

Alt text为如果图片无法显示时显示的文字。
/path/to/img.jpg为图片所在路径。
Optional title为显示标题。显示效果为在你将鼠标放到图片上后，会显示一个小框提示，提示的内容就是Optional title。

注意：Markdown 语法目前还没有某种合适的办法指定图片的宽高，但据我所知，很多平台以及在这个方向作出相当多的改进了，一起期待吧！

书写格式

文内链接
![idol](http://pcx2lec2u.bkt.clouddn.com/201808051449_378.jpg)引用链接
![idol][idol]
[idol]: http://pcx2lec2u.bkt.clouddn.com/201808051449_378.jpg

解析效果
文内链接

2.8 表格

表格的书写格式一目了然，还是很方便简洁的。

书写格式

| 左对齐 | 中间对齐 | 右对齐 |
| :---   |  :---:   |   ---: |
| 左1    |  中1     |  右1   |
| 左2    |  中2     |  右3   |

解析效果

左对齐	中间对齐	右对齐
左1	中1	右1
左2	中2	右2

2.9 角标

不同于前面说的链接，这里的角标内容会被放在文末，点击可以实现跳转，使用 [^] 来定义脚注。

书写格式

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

解析效果

使用 Markdown¹ 可以效率的书写文档，直接转换成 HTML² ，你可以使用Leanote³ 编辑器进行书写。

2.10 上下标

、 用作表示上下标

书写格式

E = mc<sup>2</sup>
Water : H<sub>2</sub>O

解析效果
E = mc²
Water : H₂O

2.11 直接链接与邮箱

在 markdown 中将链接地址或邮箱地址用 <> 包围，则会被自动转换成可点击的链接地址。

书写格式

<http://haoeric.com>
<haoeric0520@gmail.com>

解析效果
http://haoeric.com
haoeric0520@gmail.com

2.12 换行

使用html标签   、   换行

书写格式
```
第一行hahaha 第二行6666
```
解析效果
第一行hahaha
第二行6666

2.13 反斜杠

如果需要避免文本中的符号被当做 markdown 标识符而发生不必要的格式转化，可以在符号前加 \ 来避免。

书写格式
```
\*不是斜体\*
```
解析效果
* 不是斜体 *

整理一下，Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

符号	含义
`\`	`反斜线`
`\|`反引号`
`*`	`星号`
`_`	`底线`
`{}`	`花括号`
`[]`	`方括号`
`()`	`括弧`
`#`	`井字号`
`+`	`加号`
`-`	`减号`
`.`	`英文句点`
`!`	`惊叹号`

2.14 代码高亮

使用栅栏标记代码块的一个好处是可以标明代码的语种，然后实现代码的高亮。

书写格式

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

解析效果

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

2.15 其他

2.15.1 锚点

网页中，锚点 其实就是页内超链接，也就是链接本文档内部的某些元素，实现当前页面中的跳转，最典型的例子就是 目录 这种结构了。比如我这里写下一个锚点，点击 回到目录，就能跳转到 目录。在 目录 中点击这一节，就能跳过来。
在 Github 的 md 文件中，会为每个 h1~h6 标签(即 # ... ###### )，自动塞入一个 a 标签，并渲染好 id 。

比如 # h1，被渲染成html如下：

<h1><a id="user-content-h1" class="anchor" href="#h1" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" role="img" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z"></path></svg></a>h1
</h1>

不去管 svg 部分，可以看到 h1 标签内嵌入了一个 id 为 "user-content-h1" 的 a 标签，如果标题为 # h5 ，那么 id 就会是 user-content-h5 。

2.15.2 空格

在段首加入 &emsp;、&ensp;、  来输入空格，其中，&emsp; 是一个中文字符，&ensp; 是半个中文字符，  是1/4中文字符。

2.15.3 图片图床

插入图片的地址需要图床，那么，究竟什么是图床呢？
图床，顾名思义，图片床，即大量图片汇聚地，每一张图片都有一个url,供所需站点使用。
详情可以参考我之前写的博文图床工具分享。
另外，越来越多的 Markdown 工具现在开始支持 一键上传图片至云端并生成 Markdown 引用链接至剪切板，可以看看最近的我最近在这方面的收获总结 —— Md2All Markdown排版利器以及 qiniu_upload windows工具。

ps：七牛云邀请注册链接：https://portal.qiniu.com/signup?code=3lowm9s25ur82

2.15.4 LaTeX公式

LaTeX公式参考语法

行内公式（`$`表示）

书写格式

爱因斯坦发明的质能方程是：$E=mc^2$

显示效果
爱因斯坦发明的质能方程是： E = m c 2 E=mc^2 E=mc2

整行公式（`$$`表示）

书写格式

$$\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}$$

显示效果
∑ i = 1 n a i = 0 \sum_{i=1}^n a_i=0 i=1∑nai=0
f ( x 1 , x x , … , x n ) = x 1 2 + x 2 2 + ⋯ + x n 2 f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 f(x1,xx,…,xn)=x12+x22+⋯+xn2
∑ j − 1 ∗ k = 0 γ ^ ∗ k j z k \sum^{j-1}*{k=0}{\widehat{\gamma}*{kj} z_k} ∑j−1∗k=0γ ∗kjzk

2.15.5 流程图、渲染序列图

流程图参考语法
渲染序列图参考语法

流程图

  ```mermaid
flowchatst=>start: Start:>https://www.zybuluo.comio=>inputoutput: verificationop=>operation: Your Operationcond=>condition: Yes or No?sub=>subroutine: Your Subroutinee=>endst->io->op->condcond(yes)->econd(no)->sub->io```

显示效果

Created with Raphaël 2.2.0 Start verification Your Operation Yes or No? End Your Subroutine yes no

渲染序列图

例子

  ```mermaid
sequenceDiagramAlice->>Bob: Hello Bob, how are you?Note right of Bob: Bob thinksBob-->>Alice: I am good thanks!```

显示效果

Alice Bob Hello Bob, how are you? Bob thinks I am good thanks! Alice Bob

2.15.6 GitHub Emoji

Github 的 Markdown 语法支持添加 emoji 表情，输入不同的符号码（两个冒号包围的字符）可以显示出不同的表情。
我在 github 上分享了 markdown-emoji 列表，可以去看看。

可是奇怪的是，我的GitHub Pages 采用 Hexo框架，渲染不出 emoji 表情(不支持)，这是为什么呢？

这是因为 Hexo 默认的 markdown 渲染引擎不会渲染 emoji 表情，详情可参阅搭建Hexo博客进阶篇

2.16 Markdown的局限性

不同的 Markdown 工具功能细节上可能会不一样
写技术类文章条理很重要，因此在开篇有个目录，也显得非常有必要，因此越来越多工具支持 [TOC] 一键生成目录列表，具体可参看我的 github-md-toc
另外还有，流程图，渲染序列图，LaTex数学公式，代码语法高亮，显示代码行号，图片/文字居中/左右对齐，[TOC]目录生成，等等这些，其实都是非常必要的功能，值得去做一些扩展。

3. Markdown 工具的选择

还是那句话，编辑器的兴盛固然是好事，但工具的过度丰富也是一种麻烦，如何选出适合自己的 Markdown 编辑器让很多人大伤脑筋，甚至在很多时候，一个设计不佳的 Markdown 编辑器会让初次尝试 Markdown 的写作者放弃使用 Markdown 来写作。

3.1 Windows 平台

3.1.1 Sublime

3.1.2 简书

简书的Web 端使用 Markdown 很舒服，它同样支持左右两栏的实时预览，字体优雅、简洁。

3.1.3 Cmd Markdown

3.1.4 马克飞象

3.1.5 为知笔记

3.1.6 Simple MarkPad

3.1.7 MarkPad

支持 Windows 平台

3.1.8 Miu

3.2 Mac 平台

3.2.1 Mou

3.2.2 Ulysses

3.2.3 Byword

3.2.4 typora

支持 Mac 与 Windows 平台
关联阅读：《让 Markdown 写作更简单，免费极简编辑器：Typora》
这款编辑器在大家都还在苦恼如何处理预览和写作界面之间的关系时候，机智的将「写作」和「预览」合二为一了，你输入的地方，即是你输出的地方。
Markdown 标记成为了类似快捷键一样的存在，你就像在使用一个所见即所编辑器一样，自然而快速的进行写作。可以说，Typora 完全颠覆了目前的 Markdown 编辑器的交互模式，将 Markdown 写作向普通用户推进了一大步。
Typora 的革新不止于此，它还提供了了类似 Office 的图像式表格建立方式，支持目录大纲生成，支持拖拽插入图片，并且支持所有主流代码的高亮与 LaTeX 公式编写。
可以说 Typora 是目前 Markdown 编辑器中功能最与众不同的一个，诸多新鲜而强大的功能让它卓尔不群，绝对值得尝试。

3.2.5 Quiver

3.2.6 Alternote

3.2.7 SnippetsLab

3.2.8 MarkdownPad

支持 Mac 平台

3.3 网页版(线上)

程序猿DD - 常用工具：Markdown转换工具
马克飞象 - 专为印象笔记打造的Markdown编辑器
Cmd Markdown编辑阅读器 - 作业部落出品
Dillinger, the Last Markdown Editor ever.
StackEdit – In-browser Markdown editor
Scribble - Simple Markdown Wiki
Free Markdown to HTML Converter
Draft. Write Better.
Markable.in
Markdown.css

同时，也有一些 Markdown 相关浏览器插件也是很棒的，最典型的便是：Markdown-Here，我也有写一篇博文专门介绍分享了它 —— Markdown-Here md-2-html渲染

3.4 Others

Editor.md - 开源在线 Markdown 编辑器
WriteMonkey
DAUX.IO
ReText
Cmd Markdown
vim
Mango
Haroopad
iA Writer
MarkdownX
markItUp! Universal Markup jQuery Editor

3.5 More

如有更好的 Markdown 免费编辑器推荐，请到这里留言反馈，谢谢~

4. 推荐阅读

MarkDown学习笔记
首次使用MarkDown好激动
让你的Markdown用起来得心应手
一段JS代码让Markdown自动生成侧边栏目录
Markdown 语法说明 (简体中文版)
码字必备：18 款优秀的 Markdown 写作工具 | 2015 年度盘点 - 少数派

5. 补充

2018/04/20 07:12

2018/08/05 20:36

Markdown是一种纯文本标记语言 ↩︎
HyperText Markup Language 超文本标记语言 ↩︎
开源笔记平台，支持Markdown和笔记直接发为博文 ↩︎