0. 什么是Markdown和Markdown Here

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它的目的是希望大家使用“易于阅读、易于撰写的纯文字格式，并选择性的转换成有效的XHTML（或是HTML）。

Markdown Here是一个浏览器插件（Chrome/Firefox/Safari），可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML。

1. 为什么使用Markdown和Markdown Here

为什么要使用Markdown和Markdown Here，原因其实很简单：

学会Markdown以后，写作几乎不用考虑排版，节省的排版时间可以做更多有意义的事。
使用Markdown的文章缺点是不能给文章添加颜色和居中，文章的排版会稍显单调，而Markdown Here正是为解决Markdown的这个问题而生。

2. 使用Markdown Here的正确姿势

怎么用Markdown及Markdown的语法网上有很多文章介绍，这里就不赘述了。主要介绍怎么用Markdown Here，因为作为一个不懂编程的小白第一次使用还是有一点点难度的。现有网上关于介绍Markdown Here的文章（文后参考资料）都没有做详细说明，所以要想快速使用还得折腾一下。下面我来做详细说明，快速使用Markdown Here，让你的文章排版更漂亮。

2.1 安装Markdown Here插件

直接到Markdown Here官网下载，安装步骤省略。

2.2 打开Markdown Here插件

这里我只介绍Markdown Here在Chrome和Firefox两个浏览器的打开方式。

第一次安装完插件后自动打开Markdown Here，但是浏览器关闭后再打开Markdown Here，就多一个步骤。

在Chrome浏览器上，选择右上角Markdown Here的图标，点击选项就打开了Markdown Here。
在Firefox浏览器上，右上角Markdown Here的图标不能点击，点击这一栏最右侧图标“三”--->>>附加组件--->>>扩展，找到Markdown Here插件，点击选项就打开了Markdown Here。

说实话，第一次打开Markdown Here我是一脸懵逼的，完全不知道怎么用。它有两个关键部分：第二栏和第三栏。

2.3 配置Markdown Here基本渲染CSS

第二栏是配置CSS（如果不知道CSS没关系）的，也就是通过这一栏配置，我们文章的颜色、字体会更丰富。

现在网上有不少现有的CSS样例，如果不会编写，直接用网上现成的，多试几个，选择自己比较满意的，如果没有满意的，可以问朋友或者自己尝试着改。这里提供6个markdown-here-css样例，链接https://github.com/nivance/markdown-here-css。

配置Markdown Here CSS步骤如下：

点击其中一个css文件，复制整个文件的内容。
将复制的内容拷贝到Markdown Here第二栏的基本渲染CSS里，在右上角会弹出一个“已保存”的提示，说明CSS配置生效。

2.4 Markdown Here渲染效果

CSS配好后，在第三栏“预览”就能看到CSS的效果，出现了不一样的颜色。我们的文章通过Markdown Here渲染的具体操作步骤是这样的：

1.将用Markdown工具写好的文章拷贝后粘贴到这一栏。
2.点击“Markdown转换”按钮，效果就出来了。
3.将预览结果复制，拷贝到你要发布的平台，例如微信公众号，这样你的文章排版就完成了。

对比效果

3. 总结

Markdown是我使用多年的利器，但在微信公众号显现不了它的优势，币乎的编辑器功能更弱，每次用Markdown排版后的效果奇差无比。经过多人推荐，看到他们文章的排版效果后，使用了好几次才把Markdown Here用明白。第一次使用Markdown Here阻碍我的有这两点，不知道CSS在Markdown Here上有什么用，不知道怎么应用到自己的文章里。

这两个问题跟Markdown Here的设计有一定的关系，主次不分明。跟我遇到同意问题的人应该有不少，希望通过这篇文章能为你们解惑。

4. 参考资料

（1）一个码字工作者的正确书写发文姿势—— MWeb+Markdown Here+七牛实现一键发布
（2）可能是目前最全面的Markdown写作解决方案
（3）终于找到你，Markdown Here
（4）公众号文章排版教程：Markdown Here
（5）为什么你一定要学会用Markdown写作

这才是打开Markdown Here的正确姿势