还在用秀米？Markdown让微信公众号排版效率提高10倍

作者/编辑: 漂亮的实力派

相信绝大部分自媒体的从业者或创业者在经营自己的公众号时，都在排版方面遇到不少头痛的问题，往往排版所花的时间两倍甚至数倍于内容写作的时间。市面上基于富文本排版的编辑器不少，主流的比如秀米、135等，当然微信公众平台本身也自带极其简陋的富文本编辑器。目前主流的编辑器都提供各种琳琅满目的素材、模板、挂件等等，然而我的大脑对此是拒绝，因为绝大部分文章可能只需要最简单最直接的排版，如设置标题、插入图片和链接等，相比花哨，我更喜欢简单便捷和高效。总的来说秀米一类的富文本编辑器有以下几个痛点：

手工调整各种图片/表格/流程图等非常繁琐，还经常难以对齐

一篇新文章可能大部分内容都需要重新编排

相同内容在多平台(如简书、知乎)发布时可能遇到各种不兼容不对齐的问题

那么有没有什么解决方案呢？答案是肯定的。

使用Markdown标记语言+CSS+MarkdownHere可以一站式系统性解决这些问题。网络上有很多介绍Markdown如何使用的文章，大多都支离破碎，研究起来非常痛苦。经过几天艰苦考古，决定按照自己实践的思路的重新叙述一遍。读完这篇文章后基本可以从零基础用Markdown实现公众号文章的排版。

初识Markdown和CSS

Markdown是由John Gruber于2004年研发的一种”轻量级”标记语言，当然就是上面这位哥们了; 而CSS (Cascading Style Sheets) 则是目前广泛应用于互联网前端修饰的计算机语言。你暂时不需要理解这些概念，只要记住他们的名字就可以了。他们协作的原理通俗的来说就是：通过在你所编辑的文本内容里添加Markdown语言所定义的一些特殊标记符号，告诉计算机你所希望排版的格式，譬如哪些是段落/标题，同时配合CSS提供一个排版渲染的模板，譬如字体的格式/大小/行间距等，剩下的事情则由计算机自动完成。更简单的说就是：

Markdown负责给出排版的整体框架和规则

CSS负责完成和实现排版的具体细节内容

举个简单的例子就更加直观了。以下文本中加入了Markdown中一些常用的标签，如一级标题 (#)、无序表 (-)、有序表 (1.)、引用 (>)、粗体 (**)和斜体 (***)等。

经过CSS渲染后效果图如下：

我是一级标题

我是无序表

我是有序表

我是引用

我是粗体

我是斜体

这里所用的就是本文CSS定义的效果图，有关CSS模板的使用会在后面详细介绍。

快速实现公众号文章排版

这是亲身排坑后给新手推荐的一个流程。理论上编辑Markdown排版不需要任何特殊的编辑器，你甚至可以在记事本上完成，包括近两年比较火的简书自媒体平台，本身就是一个基于云端的Markdown编辑器。但如果你希望能脱离平台持续在自己电脑上工作，还是需要一个功能强大的Markdown编辑器，比较著名的有Ulysses/Typora/Atom/Miu/马克飞象等等，在这里只推荐一个Atom，理由如下：

它免费(适合入门使用者)

它专业(专业程序员级别的编辑器)

它跨平台(支持Win/Mac/Linux全平台)

它功能强大(提供各种方便的安装包)

首先可以直接在官网下载并安装Atom客户端，在客户端可以直接打开或者新建一段经Markdown编排好的文本，客户端自带的一个插件可以实现文章预览功能，具体路径在或者快捷键，例如本文为案例预览如下图所示：

后打开浏览器安装一个叫MarkdownHere的插件,它是一个基于Chrome浏览器的小插件，可以帮助你把Markdown编排好的文本经过CSS渲染转化成微信公众平台所需要的富文本。安装后会在浏览器右上看到一个如下图的小图标：

点击就能进入MarkdownHere的菜单，如下图所示。右下方的显示当前使用的CSS渲染模板，下拉菜单里提供了很多默认风格主题的模板，你也可以在里粘贴或者编辑一个自定义的CSS模板，你可能需要一点CSS的知识，我们会在后续的文章里详细讲解，大部分时候可以直接复制粘贴一些别人的模板。左下角的可以随时帮你恢复成默认主题。

单击浏览器右上MarkdownHere的小图标，会看到粘贴的文章按CSS模板转化成立富文本的格式，这样就完成了自动排版同时可以发布了。

常用的Markdown排版功能

可以自己尝试着在编辑器里使用这些Markdown标签，看看效果。还有些比较进阶的用法，比如：

插入表格

示例：

效果：

插入网页链接

示例：

由于公众号文章只允许加入其他公众号文章作为超链接，因此这个功能只能使用于知乎一类的互联网平台。

插入代码块

在句子内插入代码格式为：`Hello World`, 在内容前后各加一个[`]符号，效果为:

如果希望插入整段的代码，可以用格式:

其中关键字是用来支持语法高亮，可以根据实际改成其他代码语言，效果图如下：

插入图片

Markdown插入图片是个稍微麻烦的事情，它使用一种和链接很相似的语法来标记图片，具体为：

其中为图片失效时候的替代文字，则是图片的链接。它可以是网络图片的链接，也可以是图片在当前电脑上的绝对路径。另一种方法是可以利用HTML的标签插入图片：

然而不管是哪一种，都需要提供一个图片的路径，当发布到公众平台的时候，图片原链接很容易失效。一个比较简单的解决办法是：在用MarkdownHere把排版文本完成渲染后，由于此时在公众平台编辑器里的文本已经转化成立了富文本，因此简单的重新剪切+粘贴后 (Ctrl+X->Ctrl+V)，图片会保留在微信的编辑器里，这样再发布就不会丢失了。如果是本地的照片，暂时只能手动上传到公众平台添加。另一种办法是用网络图床去存储要发布的图片，在后续的文章里我们再详细介绍。

写在最后

Markdown还有很多强大的功能，比如画甘特图和插入数学公式，这里就不一一举例了，可以在需要使用时候再学习。相比传统的秀米式排版方法，Markdown可能相对来说素材可能并不是很丰富，而且也需要成本去学习，但是熟练之后其速度和效率不是传统的排版方式可以比拟的，最主要的是可以轻松快速移植到其他自媒体平台。你可以想象如果要在多个自媒体平台像本文一样排版图表和代码块，需要花费多少时间。新入门时候可以选择两种排版方式并存来适应日常写作需求。有些事情入门门槛低，往往到了后期需要很多代价去维护；而有些事情开始门槛比较高，到了后期却异常高效率。在新媒体发展如此迅速的时代，时间，效率和产出才是王道。

转载授权须知

转发朋友圈无需授权

其他平台转载请添加/联系公众号