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

转载授权须知

转发朋友圈无需授权

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180418G06OBB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券