phpBB3下输入数学公式的方案之一

[寂默心流]

　　平台：debian10+nginx+mariadb10+php8　　

　　目前采取的思路是nginx调用一个cgi接口程序把一个用LaTeX语法写的数学公式转换为图片贴出来。现在这个cgi接口程序可以通过从网上下载一个C程序来自行编译，问题是nginx不支持直接调用cgi，于是需要一个fastcgi到cgi的转换进程，安装如下：

代码： 全选

sudo apt install fcgiwrap

　　然后，新建一个web根目录下的文件夹cgi-bin：

代码： 全选

sudo mkdir -p /var/www/cgi-bin
sudo chmod -R 755 /var/www/cgi-bin

　　在nginx.conf下加一段：
　　

捕获.PNG (9.61 KiB) 查看 74691 次

　　重启nginx:

代码： 全选

sudo /usr/local/nginx/sbin/nginx -s reload

　　接下来去http://www.forkosh.com/mimetex.zip下载mimetex.zip，解压，编译，放置到cgi脚本位置：

代码： 全选

sudo cc -DAA mimetex.c gifsave.c -lm -o mimetex.cgi
sudo mv mimetex.cgi /var/www/cgi-bin
sudo chmod 755 /var/www/cgi-bin/mimetex.cgi

　　在控制面版的“帖子”面板下添加一个BBcode：

　　之后在编辑画面点tex按钮，就成对给出tex的标签，类似：

捕获2.PNG (8.91 KiB) 查看 74682 次

最终效果如下：ψx=\frac{-b\pm\sqrt{b^2-4ac}}{2a}ψ
　　
　　
　　

[寂默心流]

　　不过，我现在进化到方案二了。前面搞定nginx调用cgi的途径都一样，后面变为：

　　安装latex和dvipng：

代码： 全选

sudo apt install texlive-latex-base
sudo apt install texlive-latex-extra
sudo apt install dvipng

　　

接下来去http://www.forkosh.com/mathtex.zip下载mathtex.zip，解压，编译，放置到cgi脚本位置：

代码： 全选

sudo unzip mathtex.zip
sudo cc mathtex.c -DLATEX=\"$(which latex)\" -DDVIPNG=\"$(which dvipng)\" -o mathtex.cgi
sudo mv mathtex.cgi /var/www/cgi-bin
sudo chmod 755 /var/www/cgi-bin/mimetex.cgi
sudo chmod -R 777 /var/www/cgi-bin

　　在控制面版的“帖子”面板下添加一个BBcode：

　　之后在编辑画面点tex按钮，就成对给出tex的标签，类似：

捕获3.PNG (7.08 KiB) 查看 74667 次

最终效果如下：ψ\large f(x)=\int_{-\infty}^xe^{-t^2}dtψ

　　还能显示以下的公式，挺漂亮。
ψ\Large\varepsilon=\sum_{i=1}^{n-1} \frac1{\Delta x}\int_{x_i}^{x_{i+1}}\left\{\frac1{\Delta x}\big[ (x_{i+1}-x)y_i^\ast+(x-x_i)y_{i+1}^\ast\big]-f(x)\right\}^2dxψ

　　方案二做起来比方案一稍微麻烦一点点，但显示效果要好一些，比较秀气，笔画也更细腻，没有方案一的显示效果那么粗壮。

　　附件是两个cgi文件，编译环境是debian10，amd64，latex和dvipng的路径是apt安装的缺省值。
　　

[寂默心流]

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

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

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

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

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

代码： 全选

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/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文件没法下载到本地引用。其viewtopic_body.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>

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