
编辑器 & Markdown 语法
Markdown + CSS 排版方式可以让运营从繁琐的排版工作中解脱出来,而且能让公众号形成延续的排版风格。当然,这种方式讲求的是简洁,回归内容,有活动/节日的时候,依然可以在延续 VI 的基础上用一些活泼或互动性强的排版方式,比如一图流或 SVG 交互。
公众号并不支持直接 Markdown 语法,目前所采用的方法本质上是将 Markdown 文本转换为 HTML,然后再用 CSS 进行渲染。Markdown 和 HTML 一样都是一种标记语言,什么是标记语言,后面会给大家演示。除了通过特殊方法导入公众号之外,知乎、简书、今日头条等平台都直接支持 Markdown,也就是我们不用在各个平台上重复排版,一次性导入即可。
开始学习前,我们需要准备一个支持 Markdown 的文本编辑工具。 Typora 有一个重要的理念:What You See Is What You Mean.
使用 Markdown + CSS 进行写作和排版主要分三个步骤:
- 掌握 Markdown 的常用语法;
- 解决图床的问题;
- 找到一个好用的渲染工具和好看且符合调性的 CSS 主题。
首先我们来学习 Markdown 的常用语法,其实总结下来就 10 条。
- 标题(六级)
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
2. 列表 (有序列表&无序列表&嵌套列表 | 删除或添加任意一个项目,序号自动更改)
有序列表
- one
- two
- three
无序列表
- 小明
- 小红
嵌套列表
- one
- 小明
- two
- 小红
3. 文本样式(加粗/斜体/下划线/删除线/下划线,删除线在公众号中常用于营造诙谐滑稽的效果)
斜体
粗体
删除线
组合样式
下划线
4. 引用
我是引用
5. 表格(视个人情况进行学习,直接用编辑器创建并插入也是一种可行的方法)
6. 代码块/行内代码
代码块
行内代码
7. 分割线
8. 转义字符
一些被用于标识 Markdown 语法的符号需要在前面加反斜杠 \,才能正常显示。
\ ` * _ {} [] () # + - . !
- 对齐(使用HTML标签)
- 图片(见 图床)
主题
Typora 自带五种 Markdown 主题,如果你想要尝试更多主题,可以到 Typora 官网下载。
渲染工具 & 主题
Markdown 的渲染工具有很多,这里用的是 Chrome 浏览器插件 Markdown Here。
我复制了「极客公园」一篇推文的 HTML 代码,再通过 Sitdown 转换成了 Markdown 文本。

接下来使用 Markdown Here 进行渲染。所用主题为李笑来开源的 CSS 样式,并根据自己的需要修改了行高,同时添加两端对齐并缩进 8px。

135编辑器的「一键排版」功能和秀米编辑器的「样刊模板」功能也可以解决公众号推文重复性排版的问题,不过无法支持多平台。
对于转载的文章,为了延续排版风格上的延续性,可以考虑向对方申请允许修改排版样式,然后使用 HTML to Markdown 工具(比如 SitDown)进行转换,再对转换后的 Markdown 文本进行 CSS 渲染。
图床
除了文本之外,图片是我们需要考虑的另一个问题。我们先来看一下 Markdown 插入图片的方式。
- 安装 PicGo 软件& Gitee 插件
现在我们要解决的就是链接的问题。首先下载并安装 PicGo。PicGo 是什么?可以看看官方定义:「一个用于快速上传图片并获取图片 URL 链接的工具」。安装完之后,在插件设置一栏里搜索 Gitee,下载下面任意一个插件,我使用的是左边这个 gitee 2.0.3。

- 设置 Gitee 图床
设置图床的目的在于,不管我们将 Markdown 文本导入到哪一个平台,图片都能确保不会丢失。PicGo 支持多个图床,这里使用 Gitee 作为图床。所谓图床,我们可以简单理解为存放图片的地方。
登录 Gitee 后,新建仓库(Repositroy),注意将仓库勾选为「公开」,我们在文章中引用的图片会通过 PicGo 上传到这个仓库里。

在「安全设置」一栏里找到「私人令牌」,点击提交,即可获得私人令牌(access tokens),令牌描述自己填,权限设置见下图。
注意:关闭私人令牌创建窗口后,Gitee 将不再明文显示该令牌,请做好备份。

获取私人令牌后,我们需要回到 Picgo 对 Gitee 图床进行设置。
「owner」指你在码云注册的用户名;
「repo」为存放图片的仓库名;
「path」填写 path 后,图片会被存放在仓库下的一个单独文件夹内;
「token」即上面获取的私人令牌。
至此,我们就完成了 Gitee 图床的设置,可以往图床上传图片了。

- 上传图片
- 直接通过 Picgo 主界面的「上传区」进行上传;
- Mini 窗口(悬浮球形式,支持点击上传 & 拖拽上传)

我们可以开启 「Mini 窗口置顶」和「上传后自动复制 URL」,方便上传图片及获取 URL。

这就是 Markdown + CSS 排版的完整流程,各位可以根据自己的实际情况对个别环节进行优化。
本文所用图片均保存在 Gitee 图床。
These are in fact wonderful ideas in on the topic of blogging
You have touched some pleasant things here.
I like this site because so much useful stuff on here
I dugg some of you post as I cerebrated they were very beneficial very beneficial
Great discussion definitely deserves a comment. I believe you should post more on this topic, thanks for sharing the excellent information. Your site is so cool.