重新配置服务器之后,BookStack无法再显示数学公式,虽然在自定义中引入KaTeX库,但似乎不再起作用。
从网上搜索的结果来看,主要是需要再增加一段渲染的代码,因此在自定义中完整插入如下代码:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
<script>

function _katex_render(elem) {
    renderMathInElement(
          elem,
          {
              delimiters: [
                  {left: "$$", right: "$$", display: true},
                  {left: "\\[", right: "\\]", display: true},
                  {left: "$", right: "$", display: false},
                  {left: "\\(", right: "\\)", display: false}
              ]
          }
      );
}

    document.addEventListener("DOMContentLoaded", function() {
_katex_render(document.body);
_katex_render(window.frames[0].document.body);

x = document.getElementById("markdown-editor");
x.onkeydown = () => {setTimeout(() => {_katex_render(window.frames[0].document.body);}, 0);};


    });
</script>

其中KaTeX库的版本可根据实际情况进行调整,比如:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/contrib/auto-render.min.js"></script>

刷新页面后,原来的公式渲染成功。


参考资料:
https://docs.pingcode.com/baike/3035582
https://gist.github.com/Defelo/74b116e9c543fc8c90ecc21017d99a23

最后修改:2025 年 03 月 21 日
如果觉得我的文章对你有用,请随意赞赏