公众号一键排版:Markdown + CSS

编辑器 & 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 语法的符号需要在前面加反斜杠 \,才能正常显示。

\
`
*
_
{}
[]
()
#
+
-
.
!
  1. 对齐(使用HTML标签)

居中对齐

  1. 图片(见 图床)

主题

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。

图片标题

  1. 设置 Gitee 图床

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

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

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

▲ 私人令牌 权限设置

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

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

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

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

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

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

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

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

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

你有话要说?