在研究 Markdown 排版时，发现 Typora 所见即所得的特性，对于公众号文章快速排版简直犹如神助。做好相关配置后，写作和排版同步完成，直接粘贴至公众号编辑器中即可。所需工具如下：
这篇文章主要是给大家提供一个思路，笔者只学了一天 CSS 和 HTML，完全小白，有表述错误，还请大家批评指正。
最近开始公众号写作，免不了研究写作和排版。写作的问题 Markdown 都搞定了，但是排版的问题一直是个心病。如果文章要在多个平台上传更是头疼，并不是所有平台都像少数派这么给力，支持直接上传 Markdown 代码，一次次编辑简直头都炸了。
- 图片上传，在编辑器中写好文章，上传平台的时候还要再一个个粘贴
- Markdown 编辑器中的文章上传至公众号之前，还必须用各种工具重新排版
解决方案
快速上传图片的问题，少数派上已经提出了解决方案，利用 iPic 插件快速上传编辑器中的图片，并将 Markdown 内的图片地址替换为图床链接，直接把内容粘贴到编辑器内即可。具体操作方式请看此文章：《iPic + Typora，方便快捷地在 Markdown 中插图 | 一日一技》。
解决了图片的问题，一直在研究有没有高效的方法快速搞定排版，研究了好多文章，其中两篇文章对我启发最大，《Markdown 懒办法排版微信公众号文章》和《可能吧的文章是如何排版的》。网页上的内容和排版是分开的，内容编辑好以后，再使用 CSS 样式文件完成字号、行间距、背景、颜色等排版。所以说，配置好 CSS 文件就相当于一劳永逸的完成了排版工作，只要套用 CSS 就好了。
CSS，层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
使用 Markdown 排版的主要思路：
- 在 Markdown 中写作；
- 上传图片到图床；
- 导出 HTML 源文件，配置 CSS 格式；
- 粘贴源文件到在线编辑器中， 获得富文本格式；
- 粘贴富文本格式到微信中。
大部分 Markdown 编辑器输出的都是 HTML、Markdown 的源文件，或者输出 PDF、Word 等本地格式，所以需要 3、4 两个步骤，把 HTML 源文件转换为可以粘贴到公众号编辑器中的富文本格式。
但是对于比较懒惰的我，这些步骤虽然比在秀米等排版器内编辑简便了很多，还是不够简单，一次次复制粘贴也很容易出错。直到后来，我无意中读到了 Typora 的说明文档。
Typora 是一款简约派 Markdown 编辑器，支持「所见即所得」的编辑模式，少数派上推荐过很多次，大家应该不陌生。
关联阅读：《让 Markdown 写作更简单，免费极简编辑器：Typora》
Clik here to view.
Typora 的主题功能是依靠很多预先定义的 CSS 文档实现的，只要修改 CSS 文档中的对应参数，即可修改主题的样式。所以本质上，Typora 就是一个 HTML/CSS 的渲染器。
所见即所得的排版优势
Typora 的编辑逻辑是「所见即所得」，输入 Markdown 标记后，会即时渲染成相应格式。
Clik here to view.
基于这种功能，上面所提到的 5 步骤中的两部已经由 Typora 自行搞定了。
- 导出 HTML 源文件，配置 CSS 格式；
- 粘贴源文件到在线编辑器中， 获得富文本格式；
我们需要做的只是找到 CSS 文件的目录，修改目标格式，写好文章然后复制粘贴。
使用⌘+,打开设置，然后点击Open Theme Folder即可打开 CSS 文件目录。
Clik here to view.
在目录中已经预设了很多主题，我个人比较喜欢 Github 的样式，所以我的排版样式是基于 Github 修改的。（好吧，其实是我的水平太低，让我重写一个 CSS 还不如去死）
我在目录内新建了名为「WeChat」的 CSS 文件。由于 PC 端和手机端的阅读体验不同，在电脑上我还是倾向于使用原生 GitHub 主题，在公众号文章中才会选择自定义的格式。
Clik here to view.
修改 CSS 样式表
GitHub 原来的样式已经不错了，只是在手机端浏览时，行距、页边距、字号等不太合适，另外，我修改了部分颜色，看起来不是那么单调。
修改示例，仅供参考，请根据个人喜好调整：
修改正文部分，页边距为 0.5em，行高增加至 1.5em。
p { margin: 0.8em 0.5em; line-height: 1.5em;}修改标题及引用部分的边线颜色
h2 { padding-bottom: .3em; font-size: 1.5em; line-height: 1.225; border-bottom: 1px solid #FFBF00; text-align: center}blockquote { border-left: 4px solid #FFBF00; padding: 0 15px; color: #777777;}查看修改后的样式
Typora 可以自行选择用于渲染的 CSS 文件，在电脑写作时，我会选择「Github」，在发布前，我会选择「WeChat」样式，然后粘贴到公众号编辑器中。这个「Themes」的选项，显示就是前面 CSS 文件夹的内容。
Clik here to view.
修改前和修改后的样式如下：
Clik here to view.
发布
文章写完，选择好想要的样式，复制到公众号编辑器中就 OK 了！Typora 中使用的排版样式，都会完整的复制到公众号文章中，真正的所见即所得。
Clik here to view.
