按需调用KaTeX渲染数学公式

2023-11-16 20:14:50 浏览数 (1)

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

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


直接调用(不推荐)

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

自动渲染

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

代码语言:javascript复制
<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函数来渲染。

代码语言:javascript复制
<body>
  ...
  <script>
    renderMathInElement(document.body);
  </script>
</body>

按需调用

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

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

代码语言:javascript复制
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">

声明一个方法:

代码语言:javascript复制
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:

代码语言: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>

更新:

  • 2019.09.20 将bootcdn更换为jsdelivr

0 人点赞