编辑器 & Markdown 语法

Markdown + CSS 排版方式可以让运营从繁琐的排版工作中解脱出来，而且能让公众号形成延续的排版风格。当然，这种方式讲求的是简洁，回归内容，有活动/节日的时候，依然可以在延续 VI 的基础上用一些活泼或互动性强的排版方式，比如一图流或 SVG 交互。

公众号并不支持直接 Markdown 语法，目前所采用的方法本质上是将 Markdown 文本转换为 HTML，然后再用 CSS 进行渲染。Markdown 和 HTML 一样都是一种标记语言，什么是标记语言，后面会给大家演示。除了通过特殊方法导入公众号之外，知乎、简书、今日头条等平台都直接支持 Markdown，也就是我们不用在各个平台上重复排版，一次性导入即可。

开始学习前，我们需要准备一个支持 Markdown 的文本编辑工具。 Typora 有一个重要的理念：What You See Is What You Mean.

使用 Markdown + CSS 进行写作和排版主要分三个步骤：

1. 掌握 Markdown 的常用语法；
2. 解决图床的问题；
3. 找到一个好用的渲染工具和好看且符合调性的 CSS 主题。

首先我们来学习 Markdown 的常用语法，其实总结下来就 10 条。

1. 标题（六级）

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

2. 列表 （有序列表&无序列表&嵌套列表 | 删除或添加任意一个项目，序号自动更改）

有序列表

1. one
2. two
3. three

无序列表

• 小明
• 小红

嵌套列表

1. one
   • 小明
2. two
   • 小红

3. 文本样式（加粗/斜体/下划线/删除线/下划线，删除线在公众号中常用于营造诙谐滑稽的效果）

斜体

粗体

删除线

组合样式

下划线

4. 引用

我是引用

5. 表格（视个人情况进行学习，直接用编辑器创建并插入也是一种可行的方法）

6. 代码块/行内代码

代码块

行内代码

7. 分割线

---

8. 转义字符

一些被用于标识 Markdown 语法的符号需要在前面加反斜杠 \，才能正常显示。

\
`
*
_
{}
[]
()
#
+
-
.
!

9. 对齐（使用HTML标签）

居中对齐

10. 图片（见 图床）

主题

Typora 自带五种 Markdown 主题，如果你想要尝试更多主题，可以到 Typora 官网下载。

渲染工具 & 主题

Markdown 的渲染工具有很多，这里用的是 Chrome 浏览器插件 Markdown Here。

我复制了「极客公园」一篇推文的 HTML 代码，再通过 Sitdown 转换成了 Markdown 文本。

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

135编辑器的「一键排版」功能和秀米编辑器的「样刊模板」功能也可以解决公众号推文重复性排版的问题，不过无法支持多平台。

对于转载的文章，为了延续排版风格上的延续性，可以考虑向对方申请允许修改排版样式，然后使用 HTML to Markdown 工具（比如 SitDown）进行转换，再对转换后的 Markdown 文本进行 CSS 渲染。

图床

除了文本之外，图片是我们需要考虑的另一个问题。我们先来看一下 Markdown 插入图片的方式。

1. 安装 PicGo 软件& Gitee 插件

现在我们要解决的就是链接的问题。首先下载并安装 PicGo。PicGo 是什么？可以看看官方定义：「一个用于快速上传图片并获取图片 URL 链接的工具」。安装完之后，在插件设置一栏里搜索 Gitee，下载下面任意一个插件，我使用的是左边这个 gitee 2.0.3。

2. 设置 Gitee 图床

设置图床的目的在于，不管我们将 Markdown 文本导入到哪一个平台，图片都能确保不会丢失。PicGo 支持多个图床，这里使用 Gitee 作为图床。所谓图床，我们可以简单理解为存放图片的地方。

登录 Gitee 后，新建仓库（Repositroy），注意将仓库勾选为「公开」，我们在文章中引用的图片会通过 PicGo 上传到这个仓库里。

在「安全设置」一栏里找到「私人令牌」，点击提交，即可获得私人令牌（access tokens），令牌描述自己填，权限设置见下图。

注意：关闭私人令牌创建窗口后，Gitee 将不再明文显示该令牌，请做好备份。

获取私人令牌后，我们需要回到 Picgo 对 Gitee 图床进行设置。

「owner」指你在码云注册的用户名；

「repo」为存放图片的仓库名；

「path」填写 path 后，图片会被存放在仓库下的一个单独文件夹内；

「token」即上面获取的私人令牌。

至此，我们就完成了 Gitee 图床的设置，可以往图床上传图片了。

3. 上传图片

• 直接通过 Picgo 主界面的「上传区」进行上传；
• Mini 窗口（悬浮球形式，支持点击上传 & 拖拽上传）

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

这就是 Markdown + CSS 排版的完整流程，各位可以根据自己的实际情况对个别环节进行优化。

本文所用图片均保存在 Gitee 图床。