某些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