写在前面
由于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
可以显示出这样的公式：
emoji
语法也很简单，如上面那个表情用“:joy:”就可以显示出。
遗憾的是简书对GFM做了一些简化，取消了这个语法，希望以后可以加上吧~
以上就是常用的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. 后面的作业怎么办啊...感觉写不完了）
网友评论