公众号文章排版教程:Markdown Here

写在前面

关于中文排版,李笑来曾说:“中文不像英文,笔画较多。拥拥挤挤非常难看。文章排版美观主要集中在三点:字体大小、行间距、字间距。”

应对以上中文写作困境,有一个浏览器插件正好可以匹配这些既有问题,文章排版美感得到解决。

具体是怎样的效果呢?我拿自己先后写的文章做个对比:

左边部分是经过插件渲染后,右边没有经过任何处理。我想,这个时候大家心里也有了答案。如果你感觉不错,也想要实现这样的效果,就跟随我一起完成下面的步骤。

对了,这篇教程是建立在你用Markdown格式写作的前提下,只有这样,那个浏览器插件才知道我要渲染谁,把哪些文字变大,把哪些文字加粗。如果你没有用这种格式写作,也就做不到那种效果。

在正式操作之前,我们有必要先认识一下这个插件。

Markdown Here

Markdown Here 是个浏览器插件(Chrome/Firefox/Safari),可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML。

如果你看到了一些陌生的概念,比如:“HTML”。先不要去管它。因为这些并不影响我们的具体操作。

下面,我根据李笑来老师提供的流程框架,然后结合我自己的经验,开始我们的文章排版最后一站(以后只管用Markdown格式写作,然后将文章复制到将要发布的微信编辑器里面,进行快捷键转化,发布就可以了)。

操作流程

1: 在 Firefox 中安装 Markdown Here 插件

以火狐浏览器为例(和谷歌类似),首先进入官网:

http://markdown-here.com/

选择常用的浏览器,下载匹配的浏览器插件。下载且安装后,你会看到一个提示:“重启浏览器”,你按照这个步骤往下走就可以了。重启后,你就进入到Markdown Here 页面区域,实际上是配置区域。在这里你只要关注两个地方就可以了。“基本渲染CSS”和“快捷键面板”。

到了这里,说明你已经完成了第一步:安装。

2:配置 Markdown Here Option, 自定义一些 CSS

接下来的步骤最为重要,你将要在:“基本渲染CSS” 区域进行你的CSS样式配置。具体的做法是:

  • 进入我的代码存放
  • 复制这些CSS样式;
  • 回到样式配置区域,进行完整粘贴覆盖;
  • 插件会自动保存你的修改;
  • 结束……

这些CSS样式代码属于李笑来老师的原创,我修改的地方很少。大致符合原貌。

为了大家也可以对代码进行一些个性化设置,其中一些基本配置参数需要讲讲。

下面是我们之前说的文章排版美观基本三要素:

  • 字体大小:17像素
  • 行间距为:28.8像素
  • 字间距为:1.6像素

对应到CSS样式:

.markdown-here-wrapper {
  font-size: 17px;
  line-height: 1.8em;
  letter-spacing: 0.1em;
}

进行了这些设置,你就可以做到上面那幅对比图所展示的效果了。当然,除了这些基本配置外,李笑来老师还进行了其它一些配置,如颜色搭配、字体加粗等等。

如果你也想把颜色调整一下或者其他操作,就需要CSS基本知识了。但本文并不打算讨论这些;顺便说一下,CSS属于制作网页的三要素之一,是用来渲染网页的。学习难度不大,你可以试试看。

3: 在 马克飞象 之类的编辑器中书写

具有 Markdown 格式写作的工具有很多,比如大家接触比较多的有道云笔记、简书都具备这样的格式写作。我自己用这两款工具写作的体会是,有道云笔记写作区域不能放大,这样写作效率就会大大折扣,简书虽有全屏放大特性,但美观度也达不到。这两款基本上就是凑合着用。

就在写这篇教程的时候,我找到了马克飞象这个编辑器。也是看了介绍,才知道它是为印象笔记服务的。印象笔记本身并无法Markdown格式写作,这才有了后来的马克飞象。我首推这款马克飞象。除了刚才那两点困境外,它还很好的和印象笔记进行了融合,对于我经常用印象笔记来写笔记的人来说,无疑是一个巨大的福祉。

https://maxiang.io/

4:拷贝粘贴到微信公共帐号的编辑器中

如果你采用我的建议:用马克飞象写作。将会遇到一个问题,复制编辑器内的文字到微信编辑器中时,顺带把马克飞象的底色也给带了过去。对此,我也很懊恼。解决方法也不难,就是复制到一个记事本当中,再然后复制到微信编辑器当中。

5:使用 Markdown Here 渲染

这一步,你需要知道渲染快捷键。这也可以进行配置。当把编辑区的文字复制到微信编辑器当中后,就可以利用快捷键,进行文字的渲染了。

6:插图图片,修订

其实,这算是文章排版的最后一个步骤。

但是,可能你不熟悉或者不小心碰到一个按键,就会导致渲染后的文章变得又回到了以前。这里要知道的是,渲染后可以进行文字的更改,但不适合很大的改动。

7:发布……

写在最后

这篇文章源于李笑来老师写的一篇文章“Markdown Here 教程”, 在那篇文章里,李笑来老师主要叙述了插件操作流程、以及中文文章排版的特点和插件;我写的这篇文章主要侧重于操作流程的实现,和那篇文章相比,我论述的比较详细。

如果大家在操作中,遇到一些本文并没有提及的问题,欢迎大家后台留言,我会帮助大家一一解决。

风格更新 2017.11.4

这段文字解决两个问题,首先是解释仓库代码链接打不开问题,另一个是我把样式做了调整。

有简友问:“代码存放链接打不开”。我解释下,由于我仓库的代码链接非常的长,所以我用短链接程序编辑了,变成了你们看到的这样。之所以打不开了,原因是短链接失效了。这是我疏忽导致的,以至于没有CSS基础的简友操作困难。这次,我用简书自带的链接功能就不会有这个问题了。进入我的代码存放

另外,之前的CSS风格大多部分是李笑来老师的原创,我拿过来做了微调。之后,我制作了自己的风格,风格灵感来自Bootstrap技术文档。如果你经常看一些技术文档,就会发现,技术说明文档里的文字不仅简洁逻辑,而且排版都还大方漂亮。所以,我制作了这样的风格。

效果图

使用方法:

重要文字提示(加边框变红字体)
Markdown语法:**  **

例子里面的(标题)
Markdown语法: **  **

例子
Markdown语法: >

一般来讲,写公众号文章,标题、重点说明和例子用的频率比较多,这些都影响着文章的排版,所以,我做了上面你看到的改变。

如果有帮助到你,请点击喜欢。

2017.11.4 更新


题图作者:Dustin Lee
图片授权基于CC0协议

推荐阅读更多精彩内容