在phpBB3中渲染latex公式的方法

[寂默心流]

　　三年前，我用的是mathtex.cgi渲染LaTex公式，但这办法失效了，直接报nginx 502错误，后台看是那个方法在html5的标准下属于怪异模式（quirks mode），nginx服务器不和你玩儿了。想想也正常，十几年前的老古董了，跟不上时代是必然的。何况cgi这技术路径，看着就不安全。

　　另辟蹊径吧，可最早探讨phpBB论坛上渲染LaTex公式的帖子是2007年的事。我也不知道是phpBB的用户很陋，从来不贴公式，抑或是水平很高，无师自通，不用求教和讨论。

　　我搜索半天，挺痛苦的，就是高人们总是不给你完整的实现过程，都是拣最精要的地方用只言片语秀一下就打住，可能非如此无以显其高吧。总的来说，IT领域对我这样的非专业人士来说很不友好，民科不好混啊。

　　最后我找到了“MathJax的基本使用 - 启明星工作室 - 博客园”这篇文章，总算把问题攒起来了，终于取得了突破，基本搞定了这个问题。现录出如下：

　　在overall_header.html的head段里加上一下来自katex官网文档的代码：

代码： 全选

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

其中，katex.min.js,auto-render.min.js和katex.min.css可以用wget从上面各自的链接中下载后，放在网站根目录中，用.\auto-render.min.js这样的方式引用。

　　没必要用BBcode标签了，直接单\$分割符渲染行内公式，左对齐；双\$分隔符渲染行间公式，另起一行，居中。
　　
　　另外，还可以用MathJax实现公式渲染，但渲染速度要慢一些，而且js和css文件没法下载到本地引用。其overall_header.html的加入代码如下：

代码： 全选

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { fonts: ["TeX"] }
  });
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML">
</script>

　　也是不用标签了，同上用单或双\$符号框住渲染即可。效果如下：

屏幕截图 2024-04-20 062235.png (8.89 KiB) 查看 28 次

[davidyin]

[寂默心流]

这些脚本不要放在overall_header.html里，因为里面的js和css文件调入很慢的，影响浏览速度。可以放在viewtopic_body.html尾部，这样只在打开具体帖子的时候才调用katex脚本，这样就更合理。