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