按需调用KaTeX渲染数学公式

蒟蒻

发布于 2023-11-16 20:14:50

4890

发布于 2023-11-16 20:14:50

文章被收录于专栏：小站小站

某些Typecho主题没有添加对于LaTeX数学公式的支持，在这里给出几种手动添加的方法。其他博客如WP,Hexo同理也可使用。

这里给出三种方法添加对于LaTeX公式的支持，可以按要求选用。因为MathJax据说性能较差，所以选用了可汗学院开发的KaTeX来渲染。

直接调用（不推荐）

过于复杂，在官方Github的介绍页面有详细介绍，不做赘述。

自动渲染

我们可以在页面中引入css和js来达到自动渲染的效果。在</head>前加入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex/dist/contrib/auto-render.js"></script>

最后再在html文件的</body>标签前面调用renderMathInElement函数来渲染。

<body>
  ...
  <script>
    renderMathInElement(document.body);
  </script>
</body>

按需调用

第二种方法虽然方便，但是无论打开什么页面都会加载这些文件，在速度上明显就慢了(然而并没有什么区别)，所以我们采用按需调用来达到页面内有LaTeX公式时才自动引入css和js文件的方法。

首先在页面头部<head>部分引入css文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">

声明一个方法：

function LoadJS(adr) {
    new_node = document.createElement("script");
    new_node.setAttribute("type","text/javascript");
    new_node.setAttribute("src",adr);
    document.body.appendChild(new_node);
}  //动态引入JS文件

然后在页面的尾部加入以下Javascript：

<script>
    var str = document.getElementsByTagName("article")[0];  //这里根据不同主题调整
        var isKaTex = str.innerHTML.indexOf('$');  //以是否存在 “$”来判断LaTeX公式，可能有误判情况
    if(isKaTex) {
        LoadJS("https://cdn.jsdelivr.net/npm/katex/dist/contrib/auto-render.js");
        LoadJS("https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js");
    }
    //等待DOM加载完成后渲染，避免影响页面加载时间
    window.onload = function() {
        if(isKaTex != -1) renderMathInElement(str,
                        {
                            delimiters: [
                                {left: "$$", right: "$$", display: true},
                                {left: "\\[", right: "\\]", display: true},
                                {left: "$", right: "$", display: false},
                                {left: "\\(", right: "\\)", display: false}
                            ]
                        }
                    );
    }
</script>

更新：