在百度腦圖中添加公式支持【MathJax、JavaScript】

背景

“百度腦圖”是一個很好用的思維導圖軟件，它無需安裝，在任何地點都可以使用的特點是筆者最中意的。可是，作為技術人員，筆者常常要記錄一些公式，百度腦圖卻無法做到。筆者學過一丁點前端的知識，故試著為百度腦圖補充該功能，現在將解決方案記錄下來，以備不時之需，也希望幫助到有同樣需求的人。

解決方案

首先，應用此方案需要Chrome瀏覽器。在Chrome瀏覽器中安裝ODM SandBox插件，使用該插件就可以在網頁中插入用戶編寫的JavaScript腳本。
（當然，有一些其他瀏覽器/插件同樣可以插入用戶腳本，不再詳述。）
在插件中設置下述腳本：

if (document.URL.indexOf("naotu.baidu.com") != -1) {
    console.log("启动脚本，在脑图中添加mathjax");   
    // 為瀏覽器導入MathJax腳本 
    var script1 = document.createElement('script');
    var script2 = document.createElement("script");
    script1.type =script2.type = "text/javascript"
    script1.src = "https://polyfill.io/v3/polyfill.min.js?features=es6";
    script2.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
    script2.async = true;
    // 導入用戶腳本，該腳本用於在需要時自動調用MathJax
    var script3 = document.createElement("script");
    script3.innerText = `
    var changed = false;
    function onChange () {
        console.log("changed");
        changed = true;
    }
    $(".note-previewer").bind("DOMNodeInserted", onChange);
    setInterval(function() {
            if (changed && window.MathJax) {
                console.log("MathJax运作");
                changed = false;
                $(".note-previewer").unbind("DOMNodeInserted");
                window.MathJax.typeset();
                $(".note-previewer").bind("DOMNodeInserted", onChange);
            }
        
    }, 1000);
    `;
    // 以上腳本全部插入到網頁中
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script1);
    head.appendChild(script2);
    head.appendChild(script3);
}

插入腳本之後，就可以在備註中編寫公式了，效果如下：

可以在百度腦圖中編寫公式了

完工！

後續計劃

該腳本已經可以滿足筆者的要求了，但還有待改進的地方，比如，

不支持在普通節點加入公式；
編輯Markdown時，兩個反斜杠當作一個反斜杠用，不方便；
……

嗨呀，沒辦法，勉強能用吧。

最后编辑于：2020.02.16 11:26:06