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

原文链接:如何在公众号中插入公式

快速了解我们开发的公式插件:微信公众号公式编辑插件 mpMath

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

缘起

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

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

现有方法

方法有吗?有,还不少。

1. 插入公式图片

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

这种方法有什么问题呢?

  • 不清晰
  • 加载慢
  • 插入麻烦
  • 不支持公众号内编辑
  • 可这可能偏偏是别人不说我们唯一能想到的一种方法了,所以许多人都是这么用过来的。大家都妥协了。

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

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

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

    但是吧,就有那么一点小问题,比如:

  • 公式以图像标签插入,难控制字号
  • 不支持 Darkmode
  • 不支持公众号内编辑
  • OK,我又拒绝了。

    3. Markdown Nice

    可能这个时候,有人会来告诉你,有那么一个神器可以生成插入微信的公式:

    mdnice.com

    喜欢 MathJax 的同理

    这真的是个非常完美的编辑器,大概是全网第一个实现公式插入的编辑器吧(这篇文章就是使用 mdnice 上传的)。可是微信公众号自己的编辑器又是一个很能令人愤怒的东西,总会出一些奇怪的问题,比如:

  • 公式复制到微信后 SVG 被加上一层 embed 标签,自动传至微信图床,失去 currentColor 的继承,不支持 Darkmode
  • 针对这个问题,我的一位师哥(公众号 Cigaret)给出了十分好的解决方案,可以一键去除被微信加上的 embed 标签:

    github.com/kongxiangyan/bookmarklet

    4. TeX -> SVG

    公式这一行,一直存在一个鄙视链:

    Word 公式 < MathType < LaTeX

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

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

    自己开发插件

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

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

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

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

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

    blog.ciaochaos.com/mpmath
    github.com/ciaochaos/mpMath

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

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

  • 不知道怎样做插件
  • 我们一开始连 JavaScript 都不懂
  • 微信编辑器在命令插入的时候会遇到各种各样的问题
  • 公式莫名其妙地消失、变化、出错
  • 在原生编辑器里点保存的那一刻,一切都消失了
  • 好在,通过不懈的努力,我们已经解决了大部分的问题。剩下的,还望大家能来 Github 提供一些帮助……

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

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

    作者

  • ciaochaos - CUC
  • CPunisher - BUAA
  • 最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 203,324评论 5 476
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 85,303评论 2 381
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 150,192评论 0 337
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 54,555评论 1 273
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 63,569评论 5 365
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 48,566评论 1 281
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 37,927评论 3 395
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 36,583评论 0 257
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 40,827评论 1 297
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 35,590评论 2 320
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 37,669评论 1 329
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 33,365评论 4 318
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 38,941评论 3 307
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 29,928评论 0 19
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 31,159评论 1 259
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 42,880评论 2 349
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 42,399评论 2 342