其實(shí)早在好幾年前 KaTeX 剛出來的時(shí)候, 我就有關(guān)注這個(gè) MathJax 的代替者. 不過當(dāng)時(shí)好多公式符號都無法加載, 那時(shí)甚至矩陣都顯示有問題. KaTeX 雖然加載公式速度很快, 但是怕我文章里有公式不能正常顯示, 所以還是沒有選擇使用它. 不過就像很多開源軟件一樣, 時(shí)間能讓它們變得越來越好. 誠如前段時(shí)間回歸 Typecho 重新寫博客一樣, Markdown 和 MathJax 之間的小 Bug 得到完美解決; 如今 KaTeX 也能獨(dú)當(dāng)一面, 可以徹底代替 MathJax 了.
為了方便, 所以還是使用了官方自帶的 CDN 的簡單配置.
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"></script>
其中前兩個(gè)是 KaTeX 的基本配置,第三個(gè)是自動(dòng)加載的插件. 不過之后遇到的 KaTeX 的唯一問題是默認(rèn)所有公式無論是行間公式還是行內(nèi)公式都要寫在左右各兩個(gè)美元符號內(nèi). 這和其他 LateX, MathJax 的習(xí)慣不一致. 所以我還是去看了一下設(shè)置, 其實(shí)在配置delimiters 中修改. 于是添加如下配置:
<script>
renderMathInElement(document.body,
{
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false}
]
}
);
</script>
最后終于開心地發(fā)現(xiàn)博客里的數(shù)學(xué)公式加載變快了, 同時(shí) KaTeX 和 InstantClick 也沒有像 MathJax 一樣有時(shí)候出現(xiàn)加載到一半(mathjax快速預(yù)覽)的沖突. 贊!
whzecomjm
2018年7月12日
Update
應(yīng)評論要求明確一下使用方法: 在博客的首頁 index 文件 (或者 header) 中的 <head> 中加載如下腳本即可.
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"></script>
<script>
renderMathInElement(document.body,
{
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false}
]
}
);
</script>
2019-06-18
