使用 Typora 一次性搞定公众号写作与排版

在研究 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》

Typora 的主题功能是依靠很多预先定义的 CSS 文档实现的，只要修改 CSS 文档中的对应参数，即可修改主题的样式。所以本质上，Typora 就是一个 HTML/CSS 的渲染器。

所见即所得的排版优势

Typora 的编辑逻辑是「所见即所得」，输入 Markdown 标记后，会即时渲染成相应格式。

基于这种功能，上面所提到的 5 步骤中的两部已经由 Typora 自行搞定了。

导出 HTML 源文件，配置 CSS 格式；

粘贴源文件到在线编辑器中，获得富文本格式；

我们需要做的只是找到 CSS 文件的目录，修改目标格式，写好文章然后复制粘贴。

使用⌘+,打开设置，然后点击Open Theme Folder即可打开 CSS 文件目录。

在目录中已经预设了很多主题，我个人比较喜欢 Github 的样式，所以我的排版样式是基于 Github 修改的。（好吧，其实是我的水平太低，让我重写一个 CSS 还不如去死）

我在目录内新建了名为「WeChat」的 CSS 文件。由于 PC 端和手机端的阅读体验不同，在电脑上我还是倾向于使用原生 GitHub 主题，在公众号文章中才会选择自定义的格式。

修改 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;
}