编辑和排版公众号文章的 Markdown 解决方案

这篇文章介绍的思路和方法，不仅适用于公众号的编辑和排版，对于其他支持 Markdown 的博客网站，如 csdn、博客园、知乎、简书等，以及用 Github 自建的博客，也可食用。

痛点分析

自从 2017 年的文章是时候使用 Markdown 写作了开始，使用 Markdown 已近四年时间，记录思考、笔记、总结，基本都是使用 Markdown 这个工具及其周边，在此把使用过程中遇到的一些问题，找到的一些好用的周边工具及解决方案做个总结，分享给你们，希望对你们也有所帮助。

刚开始写微信公众号的时候，用的是有道云笔记的普通编辑器，通过云同步，解决到处都可以写的问题。

写了一段时间，发现对文字、超链接、表格、代码、数学公式的排版，经常要脱离键盘去点鼠标，效率低，排版不好看，刚好这时候看到 MacTalk 公众号推荐了有道云笔记的 Markdown 功能，初步了解了一下它的语法和使用，逐步开始转用 Markdown 开始写，有道云笔记有一个好处是，Markdown 编辑器的上方提供了一些按钮，刚开始对一些 Markdown 语法不熟悉的时候，比如表格，点击表格的按钮，编辑区就会出现表格的示例，按示例格式修改为自己的内容即可。同时把有道云笔记设置为双栏查看，左边是 Markdown 编辑区，右边为预览区，可以马上看到文字排版效果，思路想法一来的时候，双手不离键盘，一气呵成。

当时的文字主要发布在微信公众号和 CSDN，CSDN 有专门的 Markdown 编辑器，和有道云笔记的语法基本是相通的，写完直接复制过来即可，但是微信公众号却没有 Markdown 编辑器，如何做到一次编写，到处运行呢？

另外，目前只做到了文本类语法如超链接、表格、列表、代码等的即时编写，对于图片，依然需要用鼠标从本地上传和调整，微信公众号文章的排版不太美观。

综上所述，主要是为了解决如下几个问题：

• 随时随地可写。
• 双手尽量在键盘上，不用或少用鼠标操作，写文章是一气呵成的。
• 一次编写，到处运行。
• 能预览文章样式和排版，解决公众号排版问题，排版是一键转换的。
• 图片上传和存储方便，能直接生成相应的 Markdown 内容。

排版工具

Markdown Here

随时随地可写和一起呵成写文章，用有道云笔记基本可以解决，后期也经常使用 Visual Studio Code，因为 VS Code 的工作区功能和各种插件简直让人爱不释手，你可以专门新建一个 Markdown 工作区，只安装用 Markdown 记想法写文章所用到的一些插件，在 Python 工作区安装用 Python 开发的一些插件，避免工作区混在一起，同时工作区内的插件少而美，不臃肿。

首先解决公众号排版一键转换的问题，当时找到了 Markdown Here 这个浏览器插件，支持 Chrome 和 Firefox，看网站主页的介绍，它是为了格式化邮件内容的，但，只要内容是 Markdown 写的，不管是邮件还是其他，都可以利用 Markdown Here 的浏览器插件一键渲染，插件配置页面分为了基本渲染 CSS 和语法高亮 CSS，语法高亮样式会在基本渲染完成后生效，所以有较高优先级。

操作流程如下：

• 在 Chrome/Firefox 中安装 Markdown Here 插件
• 配置 Markdown Here 的基本渲染样式 CSS 和语法高亮 CSS，也可用现成的比较好的 CSS 样式，比如李笑来 GitHub 开源的¹，https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2，如果对 CSS 和中英文排版熟悉，也可以自定义一些 CSS。
• 在有道云笔记或 Visual Studio Code 等 Markdown 编辑器中书写。
• 拷贝粘贴到微信公众号的编辑器中。
• 点击浏览器插件，使用 Markdown Here 渲染。
• 书写时留好插入图片位置和标记，手工插入图片，检查及修改。
• 发布文章。

Markdown Here 渲染前在公众号的效果如下：

Markdown Here 渲染后在公众号的效果如下：

使用 Markdown Here 一段时间后，有两个问题还未解决：

• 代码在微信公众号用 Markdown Here 渲染后不美观，如果一行代码很长，在 PC 端可以显示滚动条，在手机端会自动换行，不显示滚动条。
• Markdown渲染后显示图片上传失败，图片需要从本地上传，或者从微信公众号的图片库选择。

Md2All

Md2All² 是由微信公众号作者颜家大少所开发的 Markdown 排版利器，支持"一键排版"、自定义 CSS、代码高亮，能让 Markdown 的内容，无需做任何调整一键复制到微信公众号、csdn、博客园、掘金、知乎、51cto、Wordpress、hexo 等平台，同时支持云图床功能。完整教程链接前往Md2All，使用网址：http://md.aclickall.com/。

操作流程如下：

• 在 http://md.aclickall.com/ 的一键排版功能中，根据预提供的样式模版，先复制某一份你喜欢的 CSS 模版样式到最爱样式下，再在此最爱样式基础上，自定义自己的 CSS 样式。
• 在有道云笔记或 Visual Studio Code 等 Markdown 编辑器中书写。
• 拷贝 Markdown 内容粘贴到 Md2All 的编辑器中，右边会显示渲染后的内容。
• 一键复制，点击工具栏的复制按钮。
• 粘贴复制后的内容到微信公众号的编辑器中。
• 书写时留好插入图片位置和标记，手工插入图片，检查及修改。
• 发布文章。

Md2All 渲染前后对比效果如下：

根据 Md2All 的介绍，它的云图床功能已经很好的解决了图片上传和存储的问题，支持以下几种方式：

• 把图片拖到编辑框，编辑框自动生成相应的 Markdown，预览区正确显示图片。
• 支持截图后直接复制剪贴板内容。
• 支持编辑区点图片图标，通过文件路径选择图片。

教程中使用的图床方案是七牛云存储，有一定的免费额度，但测试域名使用30天需要绑定自己备案的域名才能继续使用，当前未采用此方案处理图片。

至此，一次编写到处运行、代码高亮和显示的问题已解决，图片存储和处理的问题未解决。

可能吧公众号排版器

阿禅 Jason Ng 大神对排版的思考³值得好好读几遍，它是对于内容呈现、阅读的深刻理解，推出的可能吧公众号排版器⁴，针对中文公众号的内容特征，做了一些额外的语法支持，写文章一气呵成，排版一键转换。如果文章图片和代码少，内容用 Markdown 书写，再粘贴到公众号后台，这个排版器是首选，很有逼格。排版器地址和具体的使用方法，前往 https://knb.im/mp/ 直接查看。

Markdown 插入图片

Markdown 插入图片⁵有三种方法，插图最基础的格式就是：![Alt text](图片链接 "optional title")，Alt text：图片的 Alt 标签，用来描述图片的关键词，可以不写，最初的本意是当图片因为某种原因不能被显示时而出现的替代文字，后来被用于SEO。图片链接可以是图片的本地地址或者是网址，“optional title”，鼠标悬置于图片上会出现的标题文字，可以不写。

• 插入本地图片，在基础语法的括号中填入图片的本地路径即可，支持绝对路径和相对路径，例如：![avatar](local path)，缺点是不灵活不好分享，本地图片的路径更改或丢失都会造成 Markdown 文件调不出图。
• 在基础语法的括号中插入图片的网络链接，现在已经有很多免费/收费图床和方便传图的小工具可选，如七牛图床、有道云笔记会员的 markdown 图床。
• 用 base64 转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的位置。基础用法：![avatar](image base64)，这时会发现插入的一长串字符串会把整个文章分割开，非常影响写文章时的体验。如果能把大段的 base64 字符串放在文章末尾，然后在文章中通过一个 id 来调用，文章就不会被分割的这么乱了，就像写论文时的文末的注释和参考文档一样。这个想法可以通过 Markdown 的参考式链接语法来实现。进阶用法如下：![avatar][doge]，文末存储字符串语法：[doge]:data:image/png;base64,iVBORw0......，这个用法不常见，优点是很灵活，不会有链接失效的困扰，缺点是一大团 base64 的乱码看着不美观。

除了开通有道云笔记会员外，我分享一下自己尝试过的几个方法。

有道云笔记 Markdown 插入图片

通过有道云笔记文件夹管理图片，操作流程如下：

• 在有道云笔记中新建一个目录/文件夹【图片共享】。
• 上传本地图片到有道云笔记到图片共享目录下。
• 点击分享图片就会得到一个文件的分享 URL，将这个 URL 复制在浏览器中打开，可以看到图片。
• 右击图片，复制图片地址。
• 在 Markdown 文件中引用这个图片地址。

注：共享图片不可以删除，否则笔记中找不到图片。

通过有道云笔记新建一篇普通笔记管理图片：

• 图片拖动到编辑框，或者直接粘贴截图到剪贴板的图片，或者点击工具栏的图片图标从文件路径选择图片。
• 同步这篇普通笔记后，分享这篇笔记。
• 在浏览器打开分享链接，右击图片，复制图片地址。
• 在 Markdown 文件中引用这个图片地址。

两种方法的原理基本一致，这两种方法都是不能将图片删掉的，否则访问不到。

GitHub 搭建图床

GitHub 搭建图床，可以配合 GitHub 自建博客使用。关于 Github 搭建博客可查看文章如何用 Github 搭建博客，自动部署可查看文章Travis CI 自动部署 Hexo 博客到 Github Pages，整个流程需要用到 VS Code 插件 PicGo，直接在 Extensions 中搜索安装就行。

打开 VS Code 设置，搜索 PicGo 的相关设置项，找到 GitHub 部分，进行配置：

• 首先是 PicGo-Core 设为 github
• branch 设为自己 Hexo 博客的源码分支，我的博客源码分支为 blog-source
• Path 和 Repo搭配使用，到时候上传的图片就会到 Repo+Path 目录下，比如我的会传到：padluo/padluo.github.io/source/images/，注意：Path 后面加/，不然后面一部分会当成图片名称合并进去，比如 Path 设为：source/images，那么上传 world.png 图片时会成为：source/imagesworld.png
• token，在 Github的 Settings-Developer settings-Personal access tokens-Generate new token，最后把 token 复制到 PicGo 设置里的 Github Token 里即可
• 然后就可以在 VS Code 里使用图床了

"picgo.picBed.current": "github"
"picgo.picBed.github.branch": "blog-source"
"picgo.picBed.github.path": "source/images/"
"picgo.picBed.github.repo": "padluo/padluo.github.io"
"picgo.picBed.github.token": "your token"

在 VS Code 使用 PicGo 的三个快捷键如下，选择图片后，在 VS Code 编辑区会自动生成 Markdown 内容，在预览区可以看到图片。

# 从文件目录手动插入图片
ctrl+alt+e
# 从剪贴板插入图片
ctrl+alt+u
# 从输入目录插入图片，相对目录和绝对目录都行
ctrl+alt+o

最后，总结一下我目前使用 Markdown 及周边工具记录笔记、写文章的方案：

方案一：有道云笔记 + Md2All/可能吧排版 + 有道云笔记 Markdown 插入图片，适合图片和代码少的 Markdown 内容。
方案二：VS Code + Md2All排版 + GitHub 图床，适合 Github 自建博客、代码和图片比较多的 Markdown 内容。

---

微信公众号「padluo」，分享数据科学家的自我修养，既然遇见，不如一起成长。

---

读者交流电报群

https://t.me/sspadluo

---

知识星球交流群

参考文档

---

1. Markdown Here 教程-李笑来 ↩︎

2. 手把手教你公众号、博客排版，Md2All 详细教程-颜家大少 ↩︎

3. 当我在排版时，我在思考什么？-阿禅 Jason Ng ↩︎

4. 为公众号排版做点微小的贡献-阿禅 Jason Ng ↩︎

5. Markdown 中插入图片有什么技巧？-知乎 ↩︎