WeChat の公式アカウントで数式を挿入する方法

ついに今日、WeChat の公式アカウントで数式を挿入する方法を見つけました。

きっかけ

なぜ WeChat の公式アカウントには数式を挿入する機能がないのでしょうか？

この問題は長い間私を悩ませてきました。知乎や語雀を見ると、彼らはとっくに数式の挿入をサポートしているのに、保守的な WeChat はユーザーの声を全く聞き入れません。追加してくれないなら、自分で作ってしまおう！

既存の方法

方法はありますか？はい、いくつかあります。

1. 数式画像の挿入

数式のスクリーンショットを撮って画像として挿入する方法です。例えば、この素晴らしい記事：理想のピザ方程式。

この方法にはどんな問題があるでしょうか？

1. 鮮明さに欠ける

2. 読み込みが遅い

3. 挿入が面倒

4. エディター内での編集不可

これは他の人が言わないかもしれませんが、私たちが思いつく唯一の方法かもしれません。多くの人がこの方法を使っています。みんな妥協しているのです。

でも私は違います。海賊版の本でさえこんなことはしません。

2. 知乎で数式を入力してコピー

誰が最初にこの天才的な方法を思いついたのかわかりませんが、面白いことに、知乎は独自の数式バックエンドを持っており、WeChat にコピーする際に自動的に画像サーバーに移行します。ベクター形式なので、非常に鮮明で速度も十分です。

しかし、いくつかの小さな問題があります：

1. 数式が画像タグとして挿入され、フォントサイズの制御が難しい

2. ダークモード非対応

3. エディター内での編集不可

OK、これも却下です。

3. Markdown Nice

このとき、WeChat に挿入できる数式を生成できる素晴らしいツールがあると教えてくれる人がいるかもしれません：

mdnice.com

MathJax のファンにも同様です

これは本当に完璧なエディターで、おそらく数式挿入を実装した最初のエディターでしょう（この記事も mdnice を使用してアップロードしました）。しかし、WeChat の独自エディターはとても腹立たしく、奇妙な問題が発生します：

1. WeChat にコピーすると、SVG に embed タグが追加され、自動的に WeChat の画像サーバーにアップロードされ、currentColor の継承が失われ、ダークモードに対応できなくなる

この問題に対して、私の先輩（WeChat アカウント：Cigaret）が素晴らしい解決策を提供してくれました。WeChat が追加した embed タグをワンクリックで削除できます：

github.com/kongxiangyan/bookmarklet

4. $\TeX$ $\rightarrow$ SVG

数式の世界には、常にこのような階層があります：

Word 数式 < MathType < $\LaTeX$

Word 数式は最も見栄えが悪いことで知られていますが、便利で普及しています。MathType は decent な商用ソフトウェアですが、デスクトップアプリケーションに過ぎません。一方、$\LaTeX$ は最も美しく、適用範囲も広く、ウェブページ用の MathJax や、Pages 用の $\verb|\| \text{blah} \{ \TeX \}$ があります。唯一の問題は、使い方を知らないことです。

そこで私は、おそらく WeChat 初の $\TeX$ SVG 記事を公開しました：中学校から大学までの数学問題。しかし、この方法は一般ユーザーにとって複雑すぎ、学習コストが高すぎるため、多くの人が諦めてしまいます。

独自のプラグイン開発

これまでの方法を説明してきましたが、なぜ最終的に独自のプラグイン開発を選んだのでしょうか？

理由は簡単です。それは私たちが愛憎半ばする WeChat のネイティブエディターです。

最初は多くの人が見栄えの良い記事を作成できず、とても落胆します。

しかし、なぜそれでも使い続けるのでしょうか？それは WeChat が強制するからです。これがないと、音声、動画、ミニプログラムさえ挿入できません。そのため、私は今でもサードパーティのウェブサイトではなく、内部での編集を選んでいます。

このような状況で、学習の機会として、私と CPunisher という 2 人のフロントエンド初心者が、WeChat の公式アカウント用の数式編集 Chrome プラグインの開発を始めました。紆余曲折を経て、比較的安定したバージョンをリリースし、Github でオープンソース化しました：

github.com/ciaochaos/mpMath

数式エディタープラグイン

数式挿入のデモ

予想外にも、mdnice コミュニティの専門家たちがすぐに反応し、このプラグインに対応してくれました。これで、mdnice で生成した数式を WeChat エディターでプラグインを通じて再編集できるようになりました！

しかし、開発中に遭遇した問題を数えると、笑うしかありません：

1. プラグインの作り方がわからない

2. 最初は JavaScript さえ知らなかった

3. WeChat エディターでのコマンド挿入時に様々な問題が発生

4. 数式が謎に消えたり、変化したり、壊れたりする

5. ネイティブエディターで保存をクリックした瞬間、すべてが消えてしまう

幸いにも、たゆまぬ努力により、ほとんどの問題を解決することができました。残りの問題については、Github コミュニティからの助けを期待しています...

この過程で、mdnice、idx、Cigaret の協力に特に感謝します。

こうして、WeChat に不満を持つ私たち 2 人の「若き反抗者」は、かなり良い解決策を作り出し、初めてオープンソースの世界に足を踏み入れました。