使用 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 排版的主要思路:

  1. 在 Markdown 中写作;
  2. 上传图片到图床;
  3. 导出 HTML 源文件,配置 CSS 格式;
  4. 粘贴源文件到在线编辑器中, 获得富文本格式;
  5. 粘贴富文本格式到微信中。

大部分 Markdown 编辑器输出的都是 HTML、Markdown 的源文件,或者输出 PDF、Word 等本地格式,所以需要 3、4 两个步骤,把 HTML 源文件转换为可以粘贴到公众号编辑器中的富文本格式。

但是对于比较懒惰的我,这些步骤虽然比在秀米等排版器内编辑简便了很多,还是不够简单,一次次复制粘贴也很容易出错。直到后来,我无意中读到了 Typora 的说明文档。

Typora 是一款简约派 Markdown 编辑器,支持「所见即所得」的编辑模式,少数派上推荐过很多次,大家应该不陌生。

关联阅读:《让 Markdown 写作更简单,免费极简编辑器:Typora

Typora 说明文档
Typora 说明文档

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

所见即所得的排版优势

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

所见即所得
所见即所得

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

  1. 导出 HTML 源文件,配置 CSS 格式;
  2. 粘贴源文件到在线编辑器中, 获得富文本格式;

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

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

Preferences
Preferences

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

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

Folder
Folder

修改 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 文件夹的内容。

Theme
Theme

修改前和修改后的样式如下:

CSS
CSS

发布

文章写完,选择好想要的样式,复制到公众号编辑器中就 OK 了!Typora 中使用的排版样式,都会完整的复制到公众号文章中,真正的所见即所得。

最终样式
最终样式


366

也谈钱

也谈钱

我的 2018 干货文章汇总及梳理:https://sspa...

关注
写作工具和技巧

写作工具和技巧

一个优秀的写作工具或平台,可以让你的文字创作成为一件享受的事情,支持 Markdown 语法、简洁的写作界面、功能丰富的编辑器......都可能是你爱上这个工具或平台的原因之一,你可以在这里推荐优秀的写作工具和平台,分享你的使用心得或经验。

关注
登录 使用文章全部功能