面对一篇微信公众号的文章,大家可能觉得没什么不寻常,但如果你有看到作者创作时使用的排版工具,便知道一篇文章排版工作的「不易」了。比如说一篇文章的标题、引言、小标题、段落、引导等等,通常需要在浏览器插件、第三方浏览器等方式逐个插入模板来调整实现。虽然看似方便,但是日复一日重复这些操作,是十分枯燥无味的。近期因为工作需要我捡起这活,在被「折磨」好一段时间后,发现真的做不来这种重复的工作,于是决定花时间解决它。当然我也并非标新立异,只是觉得一个内容工作者,应该把更多的时间留在内容上,重复的排版工作交给程序执行不是更香吗?微信公众号的文章并非长篇大论,绝大多数也不是专业文献,所以它最常见的排版样式一般是一级标题、二级标题、正文、引用、图片、加粗等等。这么一看,很容易联想到专门给写作者用排版语言:Markdown。它的好处是能让你通过键盘就能完成特定的格式排版工作,十分快捷高效。当然了,它也并非复杂的编程语言,可能你只需花 10 分钟就能轻松掌握。比如说:写一级标题只需在文字前面加一个 # 号,引用段落样式只需在文字前加 > 号,文字加粗则在文字两边分别加两个 * 号:如上图所示,通过 Markdown 写作,我们解决了内容排版样式自动化。但最重要的问题是:微信公众号编辑器不支持 Markdown,我们该如何同步自动化排版好的内容呢?
Markdown 转富文本
在网页查看代码不难发现,微信公众号编辑器其实源于百度 FEX 前端团队的开源的 ueditor 富文本编辑器项目,所以想要解决上面的问题,我们就需要将 Markdown 转为富文本。Google 搜索后,其实很快能在开源项目/软件中看到有很多优秀的实现方法(世界可真美好!),比如 markdown-here、mdnice、typora 等等。通过以上这些服务 / 软件,在 Markdown 创作且排版好的内容便可以轻松转为富文本,并支持直接粘贴到公众号编辑器中,让排版样式得以保留。左 / Markdown编辑器,右 / 粘贴到公众号的效果
主题 CSS 样式的修改
解决前面的问题后,其实还需要对 Markdown 主题 CSS 样式进行修改。毕竟上述服务的默认主题样式都太普通,并不完全适合自己的公众号。
CSS(层叠样式表),是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
Markdown 主题 CSS,其实就是决定 Markdown 编辑器里标题、字号、间距、颜色等排版样式的呈现,所以只要我把此前的排版习惯配置到 CSS 生成主题,便相当于一劳永逸地完成了排版工作,完全不需要再每次手动调整排版,即在 Markdown 软件边写作边排版。如果你负责的是品牌类公众号的内容创作,也可以直接把品牌的颜色/特征运用起来并写入 CSS,让排版风格更具独特性和不可模仿性,即既不普通也不像第三方编辑器那般俗套。在多款服务 / 软件尝试后,我最终选择使用的服务是 mdnice。除了能更好的实现上述两个需求,它还拥有稳定的图床,在其创作图文并茂的内容粘贴到微信公众号编辑器时都能完美显示(多数服务虽然也有图床可上传图片,但粘贴到公众号编辑器总会提示失败,需要手动逐个重新上传)。另外值得称赞的是它编辑界面主要分为三个区域,分别是:Markdown输入区、主题效果预览区、主题 CSS 区,让创作者能实时知道最终的排版效果: