How to Insert Mathematical Formulas in WeChat Official Accounts

Finally today, I found a way to insert formulas in WeChat Official Accounts.

Origin

Why doesn't WeChat Official Account have the function to insert mathematical formulas?

This question has bothered me for a long time. Looking at Zhihu and Yuque, they have long supported formula insertion, but WeChat, being conservative as always, never listens to users' voices. If they won't add it, fine! I'll make one myself!

Existing Methods

Are there any methods? Yes, quite a few.

1. Insert Formula Images

Take screenshots of formulas and insert them as images, like this excellent article: The Ideal Pizza Equation.

What are the problems with this method?

1. Poor clarity

2. Slow loading

3. Inconvenient insertion

4. No in-editor support

This might be the only method most people can think of, so many have been using it this way. Everyone compromised.

But I won't. Even pirated books don't do this.

2. Input Formulas on Zhihu and Copy

I don't know who first came up with this ingenious method. The interesting part is that Zhihu has its own formula backend, which automatically migrates to WeChat's image server when copied. Being vector format, it's crystal clear and fast enough.

However, there are some minor issues:

1. Formulas are inserted as image tags, making font size control difficult

2. No Dark mode support

3. No in-editor support

OK, I rejected this too.

3. Markdown Nice

At this point, someone might tell you about a magical tool that can generate formulas for WeChat:

mdnice.com

The same goes for MathJax fans

This is truly a perfect editor, probably the first one to implement formula insertion (this article was uploaded using mdnice). However, WeChat's own editor is quite frustrating and often causes strange issues, such as:

1. After copying formulas to WeChat, SVGs get wrapped in embed tags, automatically uploaded to WeChat's image server, losing currentColor inheritance, and losing Dark mode support

For this issue, my senior (WeChat Official Account: Cigaret) provided an excellent solution that can remove the embed tags added by WeChat with one click:

github.com/kongxiangyan/bookmarklet

4. $\TeX$ $\rightarrow$ SVG

In the formula world, there's always been a hierarchy:

Word Equation < MathType < $\LaTeX$

Word Equation is universally acknowledged as the ugliest, but it's convenient and widespread; MathType is a decent commercial software but just a desktop program; while $\LaTeX$ is not only the most beautiful but also the most versatile, with MathJax for web pages and $\verb|\| \text{blah} \{ \TeX \}$ for Pages. The only problem is that we don't know how to use it.

So I chose to publish probably the first $\TeX$ SVG article on WeChat: A Math Problem from Middle School to University. However, this process is too complex for ordinary users, with a high learning curve, so many give up after hearing about it.

Developing Our Own Plugin

After discussing all these methods, why did we choose to develop our own plugin?

The reason is simple: it's the love-hate relationship with WeChat's native editor.

It's so frustrating that many people can't even format their articles properly at first, which is quite discouraging.

But why do we still choose to use it? Because WeChat forces you to - without it, you can't even insert audio, video, or mini-programs. That's why I still choose to edit internally rather than using third-party websites.

Under these circumstances, treating it as a learning opportunity, CPunisher and I, two freshman frontend newbies, started developing a Chrome plugin for WeChat Official Account formula editing. After several twists and turns, we released a relatively stable version and open-sourced it on Github:

github.com/ciaochaos/mpMath

Formula Editor Plugin

Formula Insertion Demo

Unexpectedly, the mdnice community experts immediately responded and made adaptations for this plugin. Now, formulas generated in mdnice can be re-edited in the WeChat editor through the plugin!

But counting the pitfalls we encountered during development, we can't help but laugh:

1. Not knowing how to make plugins

2. We didn't even know JavaScript at first

3. Various issues with command insertion in the WeChat editor

4. Formulas mysteriously disappearing, changing, or breaking

5. Everything disappearing when clicking save in the native editor

Fortunately, through persistent effort, we've solved most of the problems. For the remaining issues, we hope to get help from the Github community...

During this process, special thanks to mdnice, idx, and Cigaret for their help.

And that's how we two WeChat-dissatisfied "young rebels" managed to create a pretty good solution, and for the first time, entered the world of open source.