08
9 月
Markdown深入理解与进阶
- By IanGoo
在我的介绍下，有一些同事已经尝到了Markdown的甜头，并且开始简单使用。但是，Markdown是一种入门非常简单，但是想要做到完全理解却有一定门槛的东西。故此，本文将介绍我使用Markdown这么长时间以来的一些理解。
本文不涉及代码和算法层面上对Markdown解析的过程，因为，我也不会……
从Markup到Markdown
首先，什么是“Markdown”？
如果理解为一种“轻量化的、方便写作的字处理软件替代品”的话，那就错了。Markdown是一种语言而非一个软件。准确的说，Markdown是一种标记语言（Markup Language）。
Markdown is a markup language.
放在英语语境当中就很灵性。
那么，标记语言又是怎么回事呢？
我们都用过Microsoft Word、写字板这类软件，在这些软件里，我们可以很方便地为文字加上各种格式，比如加粗、斜体、下划线、删除线、换个颜色之类，点点鼠标就行，很方便。并且，地球人都知道，只要两台电脑上都装了文档显示需要使用的字体，那么将.docx、.odt或者.rtf文件从一台电脑复制到另一台电脑上之后，该是什么字体就还是什么字体，原来以宋体显示的内容不会因为换了一台电脑就变成了黑体显示。
我们也都用过Windows自带的记事本，哪个软件就很简单了，只能打字，而不能单独设置字体、字号等。当然，在软件设置里可以设置这些，但是那只是设置字符在记事本当中的显示效果，而并非设置文字本身的格式。如果在一台电脑当中将记事本设置为宋体，12pt的显示效果，然后将文件保存为.txt格式，复制到另一台电脑上，而这台电脑上的记事本设置的是微软雅黑，14pt，那么就会发现文字变成了微软雅黑+14pt显示这个文本文件。
原因很简单——Word、写字板、LibreOffice、WPS等等软件，处理的都是富文本（Rich Text），而记事本处理的则是纯文本（Plain Text）。
很明显，为文字增加一些格式可以很大地提升文字的易读性，比如在一些比较关键的信息上通过加粗、加Highlight来让读者第一时间就能注意到。
听起来，富文本很牛批，那富文本一统天下咯？
可是有没有想过，富文本是如何实现的呢？
这里得说明两个概念：二进制文件与文本文件。简单点说，能够在记事本当中打开、打开之后的内容人能看得懂（不是乱码）的文件，都是文本文件，而除了文本文件之外的其他文件都属于狭义上的二进制文件（广义上所有文件都是二进制文件），二进制文件用记事本打开只会得到一堆乱码，得用专门的编辑器才能读取二进制文件在磁盘上存储的原汁原味的内容但是一般人也无法轻易编辑。
富文本有可能是通过二进制文件实现的，也有可能是通过文本文件实现的。前者的范例是Microsoft Word老版本的.doc文件，后者则包括新版本Microsoft Office的Office Open XML格式（比如.docx）、自由文档基金会的Open Document格式（.odt）、微软的Rich Text Format（.rtf）、HTML，以及Markdown。
基于文本的某些文件类型如.docx，没法用记事本打开啊？这是因为Microsoft Office Open XML是经过压缩的，将一个.docx文件更名为.zip文件，然后解压，就会看到文档的核心内容是.xml格式的，可以轻易用记事本打开。
那么，纯文本是如何实现格式化的呢？就是通过“标记语言”里的这个“标记”。
我们从最常见的标记语言——HTML（HyperText Markup Language）说起。了解HTML的都知道HTML源代码大概是什么样子的：
<html>
<head>
<title>网页标题</title>
<link rel="stylesheet" href="样式表.css">
</head>
<body>
<h1>一级标题</h1>
<p>文本内容</p>
<h2>二级标题</h2>
<p>文本内容与格式：</p>
<p><strong>加粗</strong><br><em>斜体</em><br><u>下划线</u><br><font color="red">换成红色</font><br><a href="超链接">超链接</a></p>
<img src="图片地址.jpg" alt="可选文字">
</body>
</html>出来之后的效果非常简单直白：
但是我们回头去看源代码，就会发现里面有非常多的诸如<strong></strong>、<em></em>这样的用尖括号括起来的内容，这些就是HTML里面的“标记”。它的作用就是标记那些文字需要用什么类型的方式来显示，而负责显示页面的浏览器读取到这些标记之后，就会将相应文字以正确的方式在页面上显示出来。
但是HTML也好，微软使用的XML也罢，都存在一个问题——标记非常冗长，从上面这一段源码可以看出，真正显示出来的文字可能只有源代码总容量的三分之一。这使得阅读HTML源代码非常头疼，标记之间的配对非常蛋疼，写一个HTML源代码非常肾疼。
所以，正常的字处理软件是不会让人直接手撸源代码的，如LibreOffice和Microsoft Office，采用的都是所见即所得（WYSIWYG）的设计准则。而所见即所得原则因为可以直接看到处理结果而易于入门，成为现在大多数软件的设计准则，如曾经的Microsoft FrontPage就是一个非常著名的所见即所得的网页制作工具。
但是为什么还会有Markdown这个东西呢？我认为Markdown的精髓是很简单的两个字——专注。专注于两方面的东西，第一，专注于思考，即产生内容的过程本身；第二，专注于内容，而非纠结于内容的呈现方式。
不死的文本编辑器
前面说了，本文的基础是已经具备使用Markdown的能力，如果不具备的话，前往Wiki了解Markdown的语法。
Markdown最初诞生的本意是解决HTML那令人蛋疼的冗长“标记”，发明一种更易于阅读的标记语言，然后使用Python将其转换为可供浏览器或者其他软件正常显示的HTML。
可问题在于，现在的软件业如此发达，还需要担心编辑器的问题吗？需要撰写有格式的文本，上Word啊。
然后Linux用户表示我可去你的吧……
因为纯文本是自古以来、所有计算机系统都可以阅读的文件类型，所以文本拥有其他任何类型的文件都不具备的强大兼容性和超强的生命力。不论是Microsoft Windows，还是GNU/Linux，还是macOS，还是AIX、Solaris、FreeBSD乃至已经退市的OS/2，都可以毫无压力地存取纯文本文件。并且，在可以预见的未来，纯文本依然将在未来的计算机领域占据最基础的地位——别的不说，代码的移植一定要求操作系统能够支持文本文件。
而且纯文本的处理一点都不像很多初级用户想象中的那么低效——多数用户能够接触到的文本编辑器就是系统自带的Notepad或者TextEdit。TextEdit还行但是Notepad真的很弱鸡。但是进阶用户都知道IT行业两大引战话题——最好的编程语言、最好的文本编辑器。
一个优秀的文本编辑器可以极大地提升文本编辑的效率，甚至让手撸HTML都不再费劲。添加图片链接？img后面敲个Tab，就搞定了。
当然，Markdown比HTML舒爽得多，毕竟标记简单得多。可是，今天我们已经有了Typora这样一种使用体验无限接近传统富文本编辑器的软件，为什么还需要学习Markdown语法呢？
毫无疑问，Typora是Markdown编辑器当中非常好地贯彻了“WYSIWYG”原则的一种，一点都不知道Markdown语法的用户都可以很方便地编辑Markdown文档，而且无需触及代码。但是这却失去了Markdown最大的优势——WYTIWYG，What You Think Is What You Get，所思即所得。
现在很多写作软件都有一个功能——专注模式，包括我现在正在使用的WordPress都有这样的功能。专注模式的基本操作就是将常见的工具栏按钮给隐去，让写作者专注于自己创作的内容，而非纠结于文字的格式。但是当使用文本编辑器创作Markdown的时候，天生就是处于一种“专注模式”当中。在一个Minimal的环境当中码字，没有太多乱七八糟的格式控制——当需要格式控制的时候，熟悉Markdown的用户会非常熟练地打出相应的控制字符，这样可以让用户专注于内容的创作。这也是为什么我一直认为Markdown用户应当尝试用源码的方式来进行编辑，而非依赖于所见即所得风格的编辑器。
Markdown的起源之一是在纯文本邮件当中使用的一些约定俗成的记号，如用#表示标题、用**表示重点显示的文本。本来这是一种在不支持格式化文本的情况下的无奈之举，但是却在另一个层面上无心插柳式地带来了撰写时的专注——对思考的专注。
文字与样式
“专注于内容”是另一个角度，就是暂时丢掉对格式的执着，先创作内容，然后再考虑输出的格式。
这里需要插一段题外话——你会不会用Word？
笑话，Word我不会用？
还别说，真的大概率不会用……
现在给你一个任务——编辑一个Word文档，正文需要使用Noto Sans字体，12pt，标题使用Noto Serif字体，28pt。你怎么做？
我见过大多数人的做法是——选定标题文本，点开字体，选择Noto Serif，字号设置为28pt；然后选定全部正文文本，选择Noto Sans字体，字号设置为12pt……
由此得出结论：真的不会用Word.jpg。
有没有发现Word上有一排这个工具：
这个就是“样式”，这才是编辑Word文档的正确姿势。不过我相信能看的进去本文内容的，不至于不知道样式或者不会正确使用字处理软件的样式功能。
理想的情况下，Word文档的逻辑应当是这样的：
首先，文档当中给出文档的各个部分都是什么类型的部件类似这样：
<标题>标题</标题>
<正文>这里写一些字当作正文</正文>然后，再告知各个部分应当以什么格式显示出来：
标题 {字体：Noto Serif；字号：28pt}
正文 {字体：Noto Sans；字号12pt}写到这里，熟悉HTML的应该看出里面的东西来了：这不就是HTML和CSS（层叠样式表）的伪代码嘛……
Bingo，这恰恰是现代网页组织内容样式的方法。一个大型网站内有成百上千个网页，这些网页都需要有统一的样式，如果一个个设定样式的话，会极为麻烦，而使用CSS就会简单得多。这就是网页设计当中一个极为重要的原则——内容与样式分离。这样，只需要修改一个样式表，所有引用了这张样式表的所有内容页面都会统一变更样式，极大减轻了工作量、降低了错误可能。如果所有的样式都嵌在页面当中的话，那就很糟糕了，需要修改样式的话得把所有的页面都一个个改过来，极其费劲。
任何基于样式的现代字处理软件都是相通的逻辑。而Markdown采取了一种简化逻辑。
Markdown将HTML的标记“翻译”成了一套简化的符号体系，而在输出时，HTML自然也就是Markdown的最佳目标——这是最初的markdown.pl的设计，大多数Markdown编辑器的预览功能也都依赖于HTML。
这就又有一个问题了——从Markdown解析为HTML，CSS文件从哪儿来？
现时，多数Markdown编辑器的做法是提供一些默认的“主题”来生成对应的CSS文件。比如Typora就有一系列主题可以选择安装，导出的时候可以选择导出为带CSS的HTML，也可以选择导出为无主题HTML，让用户自行指定CSS文件。
Visual Studio Code原生不支持Markdown解析，但是可以通过安装一些插件来实现对Markdown的实时预览和解析，我使用的是Markdown All in One，它在将Markdown预览和输出时会调用jsDelivr托管的CSS：https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css，以及另一个用于语法高亮的CSS，同样是来自jsDelivr，在HTML当中，这两个CSS都是在线引用的，因此必须保持设备联网才能看到正确的网页样式。
可问题又来了：如果我想要做出一些自己的调整怎么办？
Typora和Visual Studio Code都可以很方便地引用自己的样式。
Typora的做法是在主题目录下新建XXXX.userstyle.css，Typora会读取这个CSS当中的内容，Override掉XXXX.css当中的对应样式。
不知道主题目录在哪儿？Windows在%userprofile%\AppData\Roaming\Typora\Themes，Linux则在~/.config/Typora/Themes。XXXX是需要修改的Typora主题的名称，比如如果要在Github主题基础上搞点事情，就命名为github.userstyle.css。
Visual Studio Code+Markdown All in One的自定义CSS引用方式也很简单——在设置项里直接搜索Markdown: Styles就可以找到自定义CSS的选项，添加即可。
需要注意的是，自定义CSS似乎不能直接指定本地地址，最简单的就是托管到网络上，托管的方法就很多了，可以是自己的服务器，也可以是上传到Github之后然后用jsDelivr引用，当然，还有很灵活的用法，就是针对特定的Markdown用相对地址引用，灵活性比Typora更高。
编辑器的选择
其实这部分已经基本不用太多介绍了。
我上面就介绍了两个Markdown编辑器，一个Typora，一个Visual Studio Code+Markdown All in One插件。前者是WYSIWYG法则，后者是WYTIWYG法则加上Preview。
两者比较，Typora更适合新手使用，它的功能非常强大，而且非常直观。但是如前所述，我还是更喜欢Visual Studio Code加上Markdown All in One插件，可以以一种更不被打扰的方式进行写作。
但是，在文档输出方面，Typora和Visual Studio Code就不太一样了。文档输出是Markdown编辑器一项不可或缺的功能，因为文档有时候是需要拿出去交换的，我们无法确认对方能不能理解Markdown文档，在这种情况下，.docx或者.pdf文件更加适合文档的传阅和交换。
Typora支持更多的文档输出格式，包括：
- HTML
- 无样式HTML
.docx- OpenOffice（
.odt） - RTF
- ePub
- LaTeX
- MediaWiki
- reStructuredText
- Textile
- OPML
- 图像
功能无疑非常强大。当然，中间一溜比如Word文档、OpenOffice文档，都依赖于Pandoc。Pandoc的安装可以直接去官网看文档，很简单。
而Visual Studio Code + Markdown All in One则没有这么强大了。它默认情况下只能输出HTML，按F1输入Markdown All in One: Print current document to HTML命令即可生成HTML。但是其他的文档类型则没有这么方便，只能通过Pandoc命令行操作，或者将HTML打印或者粘贴到其他文档当中。
我更喜欢Visual Studio Code的理由，除了我更喜欢WYTIWYG的哲学，另一个原因就是可持续性。Visual Studio Code背靠微软的大树，又是开源软件，在微软自家的Github上发布，可以说，只要微软不倒，或者微软砍刀部没有砍掉它，VSC就可以一直存续。更何况VSC现在如此高的热度，砍刀部应该不敢动它。
而Typora是个人开发的软件，最关键的是，作者宣布在软件进入正式版之后有可能会收费。虽然Typora非常出色，也是我愿意付费的类型，但是个人开发+收费软件意味着软件的未来无法和Visual Studio Code那样拥有极为强硬背景的软件相比。
如果要给Typora找一个替代品的话，Mark Text是一个比较好玩的选择，功能不弱，但是Bug多，性能也较差，比如在渲染
公式的时候会莫名其妙缺胳膊少腿，打开文档的速度很慢，和Typora无法相提并论，反而有“斗图”这样一个莫名其妙的功能（看了一下开发者名单确实有一些中国人在其中主导），我倒是不太希望有这些无用功能，而是先将软件的核心功能优化好。
Markdown的水，其实可以很深。它不光是一个很简单的标记语言那么简单的。