本文不需要任何计算机编程知识，它将从零基础教你使用Markdown+CSS的方法实现微信公众号高效排版。
相信绝大部分自媒体的从业者或创业者在经营自己的公众号时，都在排版方面遇到不少头痛的问题，往往排版所花的时间两倍甚至数倍于内容写作的时间。市面上基于富文本排版的编辑器不少，主流的比如秀米、135等，当然微信公众平台本身也自带极其简陋的富文本编辑器。目前主流的编辑器都提供各种琳琅满目的素材、模板、挂件等等，然而我的大脑对此是拒绝，因为绝大部分文章可能只需要最简单最直接的排版，如设置标题、插入图片和链接等，相比花哨，我更喜欢简单便捷和高效。总的来说秀米一类的富文本编辑器有以下几个痛点：
- 手工调整各种图片/表格/流程图等非常繁琐，还经常难以对齐
- 每一篇新文章可能大部分内容都需要重新编排
- 相同内容在多平台(如简书、知乎)发布时可能遇到各种不兼容不对齐的问题
那么有没有什么解决方案呢？答案是肯定的。
使用Markdown标记语言+CSS+MarkdownHere可以一站式系统性解决这些问题。 网络上有很多介绍Markdown如何使用的文章，大多都支离破碎，研究起来非常痛苦。经过几天艰苦考古，决定按照自己实践的思路的重新叙述一遍。读完这篇文章后基本可以从零基础用Markdown实现公众号文章的排版。
初识Markdown和CSS
Markdown是由John Gruber于2004年研发的一种”轻量级”标记语言，当然就是上面这位哥们了; 而CSS (Cascading Style Sheets) 则是目前广泛应用于互联网前端修饰的计算机语言。你暂时不需要理解这些概念，只要记住他们的名字就可以了。他们协作的原理通俗的来说就是：通过在你所编辑的文本内容里添加Markdown语言所定义的一些特殊标记符号，告诉计算机你所希望排版的格式，譬如哪些是段落/标题，同时配合CSS提供一个排版渲染的模板，譬如字体的格式/大小/行间距等，剩下的事情则由计算机自动完成。 更简单的说就是：
- Markdown负责给出排版的整体框架和规则
- CSS负责完成和实现排版的具体细节内容
举个简单的例子就更加直观了。以下文本中加入了Markdown中一些常用的标签，如一级标题 (#)、无序表 (-)、有序表 (1.)、引用 (>)、粗体 (**)和斜体 (***)等。
#我是一级标题
- 我是无序表
1. 我是有序表
>我是引用
**我是粗体**
***我是斜体***
经过CSS渲染后效果图如下：
我是一级标题
- 我是无序表
- 我是有序表
我是引用
我是粗体
我是斜体
这里所用的就是本文CSS定义的效果图，有关CSS模板的使用会在后面详细介绍。
快速实现公众号文章排版
在简单的介绍Markdown和CSS后，我们废话不多说，直接来实战。为了实现公众号文章排版，需要用到以下工具：
- 一个好用的Markdown编辑器
- Chrome浏览器用来打开微信公众平台
- 一个叫MarkdownHere的Chrome浏览器插件
这是亲身排坑后给新手推荐的一个流程。理论上编辑Markdown排版不需要任何特殊的编辑器，你甚至可以在记事本上完成，包括近两年比较火的简书自媒体平台，本身就是一个基于云端的Markdown编辑器。但如果你希望能脱离平台持续在自己电脑上工作，还是需要一个功能强大的Markdown编辑器，比较著名的有Ulysses/Typora/Atom/Miu/马克飞象等等，在这里只推荐一个Atom，理由如下：
- 它免费 (免费的阳光，免费的空气，免费的Atom)
- 它专业 (专业程序员级别的编辑器)
- 它跨平台 (支持Win/Mac/Linux全平台)
- 它功能强大 (提供各种方便的安装包)
首先可以直接在官网下载并安装Atom客户端，在客户端可以直接打开或者新建一段经Markdown编排好的文本，客户端自带的一个插件Markdown Preview可以实现文章预览功能，具体路径在Packages->Markdown Preview->Toggle Preview或者快捷键Ctrl+Shift+M，例如本文为案例预览如下图所示：
然后打开浏览器安装一个叫MarkdownHere的插件,它是一个基于Chrome浏览器的小插件，可以帮助你把Markdown编排好的文本经过CSS渲染转化成微信公众平台所需要的富文本。安装后会在浏览器右上看到一个如下图的小图标：
点击右键->Options就能进入MarkdownHere的菜单，如下图所示。右下方的Theme显示当前使用的CSS渲染模板，下拉菜单里提供了很多默认风格主题的模板，你也可以在Syntax Highlighting CSS里粘贴或者编辑一个自定义的CSS模板，你可能需要一点CSS的知识，我们会在后续的文章里详细讲解，大部分时候可以直接复制粘贴一些别人的模板。左下角的Reset to Default可以随时帮你恢复成默认主题。
最后只需要微信公众平台里新建一个素材，把在Atom里编排好的Markdown文本粘贴到公众平台的编辑器里：
单击浏览器右上MarkdownHere的小图标，会看到粘贴的文章按CSS模板转化成立富文本的格式，这样就完成了自动排版同时可以发布了。
Atom本身还有许多强大的功能可以通过安装扩展包轻松实现，比如自定义调节CSS模板、把排版文章转化成PDF格式，这些内容将在后续的文章给大家介绍。关于本文章使用的CSS渲染模板，可以通过关注我们的公众号获取。
常用的Markdown排版功能
经过简单的实践我们熟悉了用Markdown排版公众号的基本流程，最后我们再简单介绍下一些排版中常用的Markdown标签。以下表格里列举了一些最常用的标签的具体用法，基本能满足70%-80%的排版需求。
可以自己尝试着在编辑器里使用这些Markdown标签，看看效果。还有些比较进阶的用法，比如：
插入表格
示例：
| Header1 | Header2 |
|---------|---------|
| a | a |
| ab | ab |
| abc | abc |
| Header1 | Header2 |
|---|---|
| a | a |
| ab | ab |
| abc | abc |
效果：
| Header1 | Header2 |
|---|---|
| a | a |
| ab | ab |
| abc | abc |
插入网页链接
示例：
[百度](http://www.baidu.com/)
效果：
百度
插入代码块
在句子内插入代码格式为：`Hello World`, 在内容前后各加一个[`]符号，效果为:
Hello World
如果希望插入整段的代码，可以用格式:
其中C++关键字是用来支持语法高亮，可以根据实际改成其他代码语言，效果图如下：
int main()
{
return 0;
}
插入图片
Markdown插入图片是个稍微麻烦的事情，它使用一种和链接很相似的语法来标记图片,具体为：
其中Alt text为图片失效时候的替代文字，/path/to/img.jpg则是图片的链接。它可以是网络图片的链接，也可以是图片在当前电脑上的绝对路径。另一种方法是可以利用HTML的标签插入图片：
<img src="/path/to/img.jpg"/>
然而不管是哪一种，都需要提供一个图片的路径，当发布到公众平台的时候，图片链接很容易失效。一个比较简单的解决办法是：在用MarkdownHere把排版文本完成渲染后，由于此时在公众平台编辑器里的文本已经转化成立了富文本，因此简单的重新剪切+粘贴后 (Ctrl+X->Ctrl+V)，图片会保留在微信的编辑器里，这样再发布就不会丢失了。
另一种办法是用网络图床去存储要发布的图片，在后续的文章里我们再详细介绍。
写在最后
Markdown还有很多强大的功能，比如画甘特图 (gant chart) 和插入数学公式，这里就不一一举例了，可以在需要使用时候再学习。相比传统的秀米式排版方法，Markdown可能相对来说素材可能并不是很丰富，而且也需要成本去学习，但是熟练之后其速度和效率不是传统的排版方式可以比拟的。你可以想象如果要在多个自媒体平台像本文一样排版这么多图标代码块，需要花费多少时间。有些事情入门门槛低，往往到了后期需要很多代价去维护；而有些事情开始门槛比较高，到了后期却异常高效。 新手可以选择两种排版方式并存来适应日常写作需求，在新媒体发展如此迅速的时代，时间，效率和量能才是王道。
转载请添加公众号(BeautifulElite)联系作者
网友评论