MathJax動態渲染數學公式

licoded發表於2020-11-01
公式

一般MathJax.js都是在頁面載入完成之後執行一次就OK了，但這次進行專案開發要實時渲染Markdown中的數學公式

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<script src="index.js"></script>
window.MathJax = {
    tex: {
        inlineMath: [['$', '$']],
        displayMath: [['$$', '$$']],
    },
    options: {
        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'code', 'a'],
    },
    chtml: {
        scale: 1.2,
    },
    startup: {
        ready: () => {
            window.MathJax.startup.defaultReady();
            window.MathJax.startup.promise.then(() => {
                console.log('MathJax initial typesetting complete');
            });
        },
    },
};

new Vue({
    el: '#main',
    data() {},
    updated(){
        const MathJax = window.MathJax;
        if (MathJax) {
            MathJax.typesetPromise && MathJax.typesetPromise();
        }
    }
});
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章