写在前面

由于TW的作业需要以简书博客的形式来完成，所以我将Markdown作为我的第一份作业。文章将介绍Markdown的优势、基本语法、学习中遇到的小问题，以及如何实现一个简单的Markdown解释器。如果发现文章中有什么问题，欢迎指出~

为什么要用Markdown？

Markdown是一种用来写作的轻量级「标记语言」，它用简洁的语法代替排版样式，让你在短时间内写出结构清晰、优美的文章，从而最大程度的专注于文章的内容。对恐惧word排版的朋友来说可谓福音。

经过这几天的使用，我的觉得Markdown有这些优点：

• 适合对轻量级的随笔、技术分享等进行快速排版
• 可在HTML页面、PDF文档中完美呈现
• 纯文本内容，即使用windows记事本也可进行编辑
• 语法简单，容易记忆

那么下面就来介绍一下Markdown常见的语法~

Markdown基本语法

• 标题

如果要定义某段文字为标题，在前面加上** # **号即可，几个#号就是几级标题，最低为六级：
# 一级标题
## 二级标题
### 三级标题
……
###### 六级标题

Tip1. #号与标题内容之间最好加上空格，一是为了兼容性，二是为了美观。

• 列表

分为无序列表与有序列表两种，但目前有序列表还是按无序的效果来显示，也许之后的Markdown版本中会支持有序列表的呈现。
其效果即为本章中每种语法<u>带圆点的题头</u>。
无序符号有多种，包括** - 、 * 、或 + **三种，后面再加一个空格：
* 无序列表1
- 无序列表2
+ 无序列表3
有序符号为数字+“.”+空格：
1. 有序列表1
2. 有序列表2
3. 有序列表3

这里的空格不能缺省，否则无法识别为列表格式，因此在Tip1中推荐大家在所有标记之后都要加空格，就是为了避免记混。

• 文字强调

文字强调分为粗体，斜体，<u>下划线</u>，和删除线，他们的语法分别为：
粗体
斜体
删除线
嗯...有没有发现上面没有<u>下划线</u>的语法标记？，那是因为Markdown为了避免和链接样式混淆，而去掉了<u>下划线</u>样式。如果一定要输出这种格式，那就要用到Markdown的一个特性了，即——内嵌HTML，具体请看本章最后一小节：神奇符号在哪里？

• 引用

如果你需要引用别处的句子，那么就可以用这种格式，语法如下：
> 引用一下
当然，定义中说是引用，但不一定只在引用文字时才能用这种符号，只要你觉得文章排版合理，可以表达清意思，就可以使用。

效果是这样子的
Tip2. 引用完后记得多敲一行回车，否则后面的文字都会变成引用的内容

• 图片

插入图片有两种语法，即行内式和参考式。
行内式适用于图片少的文章，语法为：

Panda

![Panda][PandaPic]
[PandaPic]: http://img.blog.csdn.net/20151109165400641

第一个“[]”内为下标图片名，第二个“[]”内为图片索引id，冒号后为图片链接。
两种方法的最终效果均为：

Panda

Tip3. 别忘了最开始的感叹号

• 链接

插入链接与插入图片的语法很像，区别是没有** ! 号。此外，插入链接有三种语法，即行内式、参考式和网址链接式。
1. 行内式适用于文字内部插入少量链接**。语法为：

       [百度](http://www.baidu.com)
  <u>效果为：</u>
最大的中文搜索引擎是[百度](http://www.baidu.com)。
2. 参考式适用于**文字内部插入大量链接**，用这种方法书写起来比较整齐。语法为：

我经常使用的搜索引擎有[Google] [website1],[Baidu] [website2],and [Bing] [website3].
[website1]: http://www.google.com/ "Google"
[website2]: http://www.baidu.com/ "Baidu"
[website3]: http://www.bing.com/ "Bing"

其中第一个“[]”内为链接显示名，第二个“[]”内为链接索引id。索引后要加冒号与空格，并且在链接的末尾，可以加上title，即鼠标放在链接上将会显示出的文字。

<u>效果为：</u>
我经常使用的搜索引擎有[Google] [website1],[Baidu] [website2],and [Bing] [website3].
[website1]: http://www.google.com/ "Google"
[website2]: http://www.baidu.com/ "Baidu"
[website3]: http://www.bing.com/ "Bing"

Tip4. 使用这种参考式时需要注意，整篇文章的<u>图片及链接</u>的索引id不能重复，且不区分大小写

3.网址链接式适用于直接呈现链接地址。语法为

百度网址是：<http://www.baidu.com>

<u>效果为：</u>
百度网址是：http://www.baidu.com

Tip5. 以上所有链接地址都要加http协议头，并填写完整的网址，否则会按jianshu.com的域名去做链接。

这里有个小疑问，希望大神帮我解答：

在参考式的链接末尾，如果将title设置为中文，最终呈现出来的只是unicode码，而非中文文字。用Chrome查看网页源码，发现链接的title存储格式为“/u4284/u15c6”形式的unicode码，在源码中修改为中文后显示正常，但刷新后失效。

初步猜测是因为简书使用的是GFM解释器（Github Favored Markdown），它在Markdown->html的翻译过程中，将html标签属性中的所有中文转换为unicode，但在显示时浏览器并未自动转换，从而出现这种问题。而对于普通的中文文字，他们只是html的string内容，而非标签内的属性值，因此不会出现这种问题。

所以这种情况该怎么办，求解~

• 公式

Markdown中采用LaTex语法来编辑公式，标记符为$$LaTex公式内容$$，但简书貌似没有支持。
所以我采用了另外的方法，即利用http://latex.codecogs.com网站在线编辑公式，并生成公式的图片链接，例如生成以下链接：
http://latex.codecogs.com/gif.latex?\prod(n_{i})+1
可以显示出这样的公式：

公式1

此外，还有其他插入公式的方法，如使用Google Chart的服务器、使用MathJax引擎等，具体方法不再详述，有兴趣的朋友可以看Mark中插入数学公式的方法

• 表格

Markdown生成表格的语法有点麻烦，如下所示：

| Tables       | Are           | Cool |
| -------------  |:-------------:| -----:  |
| col 3 is       | right-aligned | $1600 |
| col 2 is       | centered | $12 |
| zebra stripes | are neat | $1 |

可以得到以下表格：

| Tables | Are | Cool |
|: ------------- |:-------------:| -----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |

值得注意的是，第二行冒号的位置指明了该列的对齐方式：冒号在左左对齐，冒号在右右对齐，两侧都有则居中。
当然也可以用在线生成Markdown表格的网站。

Markdown生成的表格不太好看，还不如本地excel做好后截图上传（坏笑）

• 代码区块

Markdown对程序猿的一大福利就是可以编辑代码_{，语法很简单，即用三个`符号（就是ESC下面那个键，英文状态下输入）做开头，三个`做结尾即可，如果在开头的三个`后说明**代码的语言类型**，即可按这种语言的**高亮模式**去显示}：
python [code]
效果为：

import json
import re
LINK_CAPACITY = 100000000
class QosBw(app_manager.RyuApp):
    OFP_VERSIONS = [ofproto_v1_3.OFP_VERSION]
    _CONTEXTS = {
        "Network_Monitor": network_monitor.Network_Monitor,
        "wsgi": WSGIApplication
    }

这里回答一下作业中的问题——什么时候用inline code？
如果用单个`符号包裹文字，即为inline code，它适用于单行的代码展示，比如一个启动命令、安装命令等，或者需要高亮部分文字，也可以用inline code，如下：
ryu-manager --observe-links dijkstra.py
Markdown对于单个`和三个`分别解析为code和pre标签，前者不保留文字段落格式，而后者保留，因此前者适合单行展示，而后者适合多行代码展示。

Tip6. 需要在文章中打出Markdown的特殊符号时（如*,+等），只用在符号前用反斜杠*标记即可，这也与正则表达式*一致（其实Markdown解释器就是用正则写的）。

• 分隔符

三个下划线_、减号-或星号*都可实现分隔符。

能不能看到上面有三条线？嗯，就是分别用这三种方法画的。

Tip7. 使用三个减号时，上下都需要空行，另外两种不需要。

• 神奇符号在哪里？

（标题居中、下划线等效果在Markdown中的实现）

本质上，Markdown是文档结构描述语言，而不支持任何格式。但其原理就是将标记语言翻译成HTML语法，并在网页上显示出来，因此Markdown必然兼容HTML。对于某些Markdown语法中暂未支持的效果，可以内嵌标准HTML代码以达到效果。
→如插入以下HTML代码：
<div align = "center">这是居中文字</div>
<u>下划线</u>
2^上标
2_下标
简书页面上将分别出现以下效果：
<div align = "center">这是居中文字（发布后惊恐地发现格式失效了，预览的时候还对着，简书都怪你！）</div>
<u>下划线</u>
2^上标
2_下标

以上这些效果在GFM解释器中并没有实现，而使用原生HTML就可以做到。

此外，在查阅GFM的资料后，发现了一个好玩的东西，原来在GFM中可以插入emoji表情：

emoji

以上就是常用的Markdown语法，基本可以涵盖大多数的排版需求。

如何实现一个简单的Markdown解释器？

Markdown原理可分为三个主要部分：正则匹配md标记、HTML标签替换、以及UI美化。

• 正则匹配
  首先要学习正则表达式，要能够将所有md标记符识别出来，并处理多余的空格、回车等。例如识别标题符：

res = line.match("^#{1,6}.*\r$")

• 标签替换
  识别出md标记后，就可以根据其定义，翻译出对应的HTML代码，例如翻译标题类型：

level = line.count("#")
line.replace("#{1,6}","<h" + level + ">")
line += "</h" + level + ">"

• UI美化
  得到最终的HTML后，还需要字体、布局等的样式，因此还需要编写CSS及JS文件以美化文章。

注：其实我上面的代码是随便写的，大家随便看看就行，大致就这么个意思。

这里有一篇介绍Markdown实现原理的文章，以及一个实现Markdown解释器的文章，讲的都很好，有兴趣的朋友可以看看。
另外，再介绍几款开源的MD解释器：GFM，Marked，Mango。

总结

本来只是想简单写写知识总结，没想到还写了挺多的，里面的问题肯定也不少，希望大家指正~
（PS. 后面的作业怎么办啊...感觉写不完了）

参考文献

• Markdown 语法说明 (简体中文版)
• 认识与入门 Markdown
• Markdown的正确使用方式
• 一个 Markdown 编辑器的实现
• markdown 编译原理