在百度腦圖中添加公式支持【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時,兩個反斜杠當作一個反斜杠用,不方便;
  • ……

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

你可能感兴趣的:(在百度腦圖中添加公式支持【MathJax、JavaScript】)