如何在公众号中插入公式 mpMath

直到今天，我终于有办法在微信公众号中插入公式了。

缘起

为什么微信公众号就没有插入数学公式的功能呢？

这个问题困扰了我很久。看看知乎，看看语雀，人家早就已经支持公式插入了，唯独这保守的微信，永远听不到用户的声音。不加就不加吧，大不了我自己做！一！个！

现有方法

方法有吗？有，还不少。

1. 插入公式图片

给公式截图，插入图片，比如这篇极其优秀的图文：理想披萨方程式。

这种方法有什么问题呢？

1. 不清晰
2. 加载慢
3. 插入麻烦
4. 不支持公众号内编辑

可这可能偏偏是别人不说我们唯一能想到的一种方法了，所以许多人都是这么用过来的。大家都妥协了。

我偏不，盗版书都不会这么做。

2. 在知乎上输入公式并复制

不知道是哪个鬼才第一个想到这个神奇的方法，最有毒的是，知乎有自己的公式后端，在复制微信的时候会自动迁移图床。同样是矢量的格式，清晰无比，速度也够快。

但是吧，就有那么一点小问题，比如：

1. 公式以图像标签插入，难控制字号
2. 不支持 Darkmode
3. 不支持公众号内编辑

OK，我又拒绝了。

3. Markdown Nice

可能这个时候，有人会来告诉你，有那么一个神器可以生成插入微信的公式：mdnice.com。

喜欢 MathJax 的同理

这真的是个非常完美的编辑器，大概是全网第一个实现公式插入的编辑器吧。可是微信公众号自己的编辑器又是一个很能令人愤怒的东西，总会出一些奇怪的问题，比如：

1. 公式复制到微信后 SVG 被加上一层 embed 标签，自动传至微信图床，失去 currentColor 的继承，不支持 Darkmode

针对这个问题，我的一位师哥（公众号 Cigaret）给出了十分好的解决方案，可以一键去除被微信加上的 embed 标签：

https://github.com/kongxiangyan/bookmarklet

4. $\text{TEX}$ $\to$ SVG

公式这一行，一直存在一个鄙视链：

Word 公式 < MathType < $\text{LATEX}$

其中，Word 公式是公认的最难看，但是方便且普及；MathType 公式是个还算过的去的商业软件，但他就只是个桌面端程序；而 $\text{LATEX}$，不仅最好看，而且适用范围最广，前有 MathJax 适配网页，后有 $\backslash \text{blah}\{\text{TEX}\}$ 特供 Pages，唯一的问题就是，我们不知道也不会用。

所以我选择排出了大概是全微信第一篇 $\text{TEX}$ $\to$ SVG 的图文：一道从初中做到大学的数学题。但是这样的流程对于普通用户来说太麻烦，学习成本太高，听说过也放弃了。

自己开发插件

说了这么多方法，为什么最后还是选择了自己开发插件呢？

原因很简单，就是这个令人又爱又恨的公众号原生编辑器。

你说它有多令人头疼吧，很多人一上来根本排不出好看的文章，打击强烈。

但为什么我们还要选择用它编辑呢？因为微信强迫你，没有它你连音视频和小程序都插入不了。所以，我至今选择在内部编辑而不是第三方网站。

在这样的情况下，也是权当学习，我和 @CPunisher，两个刚上大一的前端小白开始做起了微信公众号公式编辑 Chrome 插件。几番波折，我们已经发出了一个还算稳定的版本，并且在 Github 上开源：

blog.ciaochaos.com/mpmath

打开上方链接即可获得公式编辑插件

没想到 mdnice 社区的大佬们立马响应，为这个插件做好了适配。接下来，在 mdnice 中生成好的公式也能在公众号编辑器中通过插件进行二次编辑了！

但是细数开发过程中碰到的那些坑，我们都有些哭笑不得，比如：

1. 不知道怎样做插件
2. 我们一开始连 JavaScript 都不懂
3. 微信编辑器在命令插入的时候会遇到各种各样的问题
4. 公式莫名其妙地消失、变化、出错
5. 在原生编辑器里点保存的那一刻，一切都消失了

好在，通过不懈的努力，我们已经解决了大部分的问题。剩下的，还望大家能来 Github 提供一些帮助……

在这个过程中，特别感谢 mdnice、idx 和 Cigaret 提供的帮助。

就这样，我们两个不满微信的「愤青」，也摸爬滚打地拿出了一个看上去很不错的方案，也是第一次，接触了开源的世界。

以下是项目文档

mpMath

项目已在 Github 上开源，欢迎来访！
github.com/ciaochaos/mpMath

想要在微信公众号的编辑器里输入公式吗？来试试我们的 Chrome 插件吧～

相信不少人有在微信公众号上输入数学公式的需求，而微信至今没有推出官方的公式编辑器。有人被迫去选择一些新的工作流程，比如我在文章《一道从初中做到大学的数学题》中采用了 $\text{TEX}\to$ PDF $\to$ SVG 的制作流程，这对普通用户来说都有一定的门槛。有人妥协，选择用截图来插入公式，或是干脆用文字字符来拼凑公式，而等等这些都有一定的问题。在这样的情况下，我们选择自己写一个插件来满足公众号输入公式的需求。

能力有限，许多问题尚未解决，许多功能尚未实现。如果大家能提供帮助的话，我们将感激不尽！

特性

• 使用 MathJax 渲染 SVG 格式的 $\text{LATEX}$ 公式
• 嵌入微信公众号原生编辑器
• 公式显示清晰、可调字号、支持字体颜色改变、支持 Dark Mode
• 完整的快捷键支持
• 适配通过 Markdown Nice 插入的公式

下载与安装

下载方式

• Github：mpMath
• 直接下载：mpMath 0.1.8
• Chrome 应用商店：mpMath

安装步骤

1. 下载 CRX 文件
2. 在 Chrome 中点击右上角 ︙ $\to$ 更多工具 $\to$ 扩展程序
   或打开 chrome://extensions/
3. 打开右上角开发者模式
4. 将 CRX 文件拖入 Chrome 窗口
5. 单击「添加扩展程序」，安装完成

使用

打开微信公众平台图文编辑界面，若 公式 已经出现在页面顶部 音频 的右侧，则说明插件成功运行。

点击 公式 即可新建公式并插入。点击已经插入的公式即可二次编辑。

如果你不太熟悉 $\text{LATEX}$ 语法，可以参考语雀的数学公式举例、Apple 的示例方程，或是这一份 MathJax 基本教程和快速参考（英文）。

如果你正在寻找基于 $\text{TEX}$ 编写的数学题，推荐一个网站：橘子数学。

如果你偏好非所见即所得的写作方式，试试这个：Markdown Nice，同样对数学公式有着很好的支持。

如果你对 SVG 排版感兴趣，看看这个公众号的文章：JZ Creative。

强烈推荐使用以下快捷键，提高输入效率。

快捷键

可能遇到的问题

• 输入行内公式的显式样式
  • 公式前添加 \displaystyle
• 公式右侧的空格会与公式捆绑在一起
  • 可以在空格右侧使用 shift + ← 选中空格并删除
• 公式不能被高亮选中、拖动
  • 可同时选中公式左右侧的字符进行复制等操作

反馈

• 本页评论区
• 邮箱：nh@ciaochaos.com
• 微信：nihao20012
• 微信公众号：Isle of Chaos

开发计划

• 公式输入提示
• 如 Typora 等的无模态弹窗公式输入
• 一键转换 $\text{LATEX}$ 公式

许可

The MIT License

作者

• ciaochaos - CUC
• CPunisher - BUAA