本文提到的 Markdown Nice 体验地址：

拥有它，让人专注于内容本身，而不被格式所打扰。

1.2 怎么和微信公众号结合？

这么优秀的排版语法，可是微信公众号也不支持呀。

别急！Markdown Nice 来帮你解决问题！

1.3 Markdown Nice 是什么？

一款开源 Markdown 编辑器，写完后即排版成功，复制即可粘贴到微信公众号。

So what？ 只有这点么？

当然不是！Nice宝宝你还有什么特性呀？

• 支持图床、脚注、代码、公式
• 支持 8 种排版主题和 7 种代码主题
• 支持自定义样式，可提交主题供人瞻仰
• 除了公众号外，还支持知乎、掘金、博客园和CSDN等平台
• 我颜值高呀

这么多优秀的特性摆在你面前，还在等什么？

地址：https://mdnice.com

快让你的微信排版 Nice 起来！

二、正文

没想到你还在看

咳咳、、、

不要小看Nice宝宝我，为了能够使用 Markdown 进行公众号排版，我可是和微信公众号编辑器做了半年的斗争，才赢得了现在的战果！

想听听我是如何战斗的？下面且听我娓娓道来！

2.1 战斗序章

微信公众号编辑器源于百度 FEX 前端团队的开源的 ueditor项目，这可是宝宝我扒取了网页代码发现的，如图所示：

因为 ueditor 是富文本编辑器，所以我即将面临的是 markdown->富文本 的转换战役，在开源界或者软件界这种转换战役有了相当多的优秀实现。比如：

• Web端：editor.md、mavonEditor
• PC端：typora、MWeb

但是上述工具都存在一个问题，没有很好地将 CSS 样式融入富文本中，进而适配微信编辑器，以至于国内其他各大平台的富文本编辑器。

那么有没有尝试弥补这一问题的工具呢？其实是有的：

• Web端：md2all、wechat-format
• 浏览器插件：markdown-here

但是上述工具也各自有不完美的地方，于是Nice宝宝我发现了这个契机，把自己生产了出来，解决一切不完美！

Markdown Nice 是一个开源项目，由很多开源技术合体而成，其中主要包括：

• React：facebook 开源的 js 视图层框架
• markdown-it：markdown 转换富文本解析器
• juice：将 CSS 类选择器转换为行内样式的工具
• codemirror：网页代码编辑器
• ant-design：React UI组件库
• mobx：状态管理库
• highlight.js：代码高亮库
• MathJax-node：公式转图片库
• axios、ali-oss、qiniu-js等

注：下文会提到上述某些开源库，开源库具体作用请参考此处。

在拥有上述技术傍身之后，我向微信编辑器宣战，打响了战斗第一枪！

2.2 战斗第一枪：代码主题

微信公众号在2018年以前，是完全不支持代码块的，目前的支持也很单一，并且存在代码字体较大的问题。

说来很气，微信公众号编辑器的开发者，就木有想过代码块对程序员群体是多么重要么？？

为此我找来了highlight.js代码高亮神器，帮助解决代码主题单一的问题。

经过一定的筛选后，最终选定了 atom-one-dark、atom-one-light、monikai、GitHub、vs2015、xcode 和微信代码主题共 7 个代码样式供大家选择。

其中微信代码主题由于其不属于highlight.js的归属范畴，故而其结构需要从微信公众号编辑器源码中获取，下面两张图展示了如何获取：

而 highlight.js 与 markdown-it 解析器是关联使用的，故而工具中存在 2 个 markdown 解析器，分别用于解析微信代码主题和其他代码主题，源码参考。

除了上述问题外，很多技术类公众号代码中会存在：一行代码过长导致的多行显示问题。

该问题使用以下 CSS 代码即可解决：