手动搭建latex公式渲染服务器

Posted 2021-01-27 weiyinfu

codecogs是一个latex公式渲染服务，它根据get请求返回一个svg图片。例如：codecogs，这个服务的缺点是比较慢。

本文介绍ubuntu下搭建类似codecogs的公式渲染服务。

一、安装latex

sudo apt-get install latex
sudo apt-get install latex-cjk-chinese

二、latex命令介绍

latex命令用于把tex文件转换成pdf文件或者dvi文件。dvi是一种设备无关的可打印文件格式。
输入dvi按两次tab可以找到dvisvgm，此命令将dvi文件转为svg。

三、编写服务程序

使用flask编写服务，通过命令行的方式调用latex获取svg。在返回时需要注意两点：

• 设置好content-type，否则客户端不知道你返回的是什么格式的图片
• 跨域访问并不需要设置，因为加载的是静态资源

使用latex命令时需要注意：

• documentclass必须是minimal，这样能够保证生成的文件尽量小。
• dvisvgm --no-fonts --no-styles，把dvi转为svg时取消导出字体和格式，而只是简单导出一张图片，否则客户端找不到这些字体和格式。

TODO:

• 添加缓存功能：可能没有必要
• 添加统计功能：统计不同网站的请求次数

import os

from flask import Flask, request, Response

app = Flask(__name__)

file_id = 0
latex_dir = os.path.join(os.path.expanduser("~"), "latex-server")
if not os.path.exists(latex_dir):
    os.mkdir(latex_dir)


def gets(formula):
    global file_id
    file_id += 1
    tex_file, dvi_file, svg_file = [os.path.join(latex_dir, "{}.{}".format(file_id, file_type)) for file_type in "tex dvi svg".split()]
    open(tex_file.format(file_id), mode='w').write(r"""
documentclass{minimal}
egin{document}
$%s$
end{document}
    """ % formula)
    os.system("latex --output-directory {} {}".format(latex_dir, tex_file))
    """
    no-fonts no-styles不带字体，c2,2表示横竖都缩放两倍
    """
    os.system("dvisvgm --no-fonts --no-styles -c2,2 -o {} {}".format(svg_file, dvi_file))
    svg = open(svg_file).read()
    for i in "tex dvi log aux svg".split():
        filename = os.path.join(latex_dir, "{}.{}".format(file_id, i))
        if os.path.exists(filename):
            os.remove(filename)
    return svg


@app.route("/render")
def render():
    formula = request.args['formula']
    print(formula)
    resp = gets(formula)
    return Response(response=resp, headers={
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "image/svg+xml"
    })


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=9988, debug=True)

四、LaTex 的 web 替代品及其存在问题

基于 html(svg)+CSS LaTex 渲染只实现了 Latex 非常少的一部分功能——公式渲染。

MathJax

MathJax 出现于 2011 年，发展至今已经有 6、7 个年头了。其特点是对数学公式的渲染支持度很高。对开发者来讲，其缺点是 js API 有点奇怪，渲染比较慢，好在支持服务器端渲染。MathJax 首先有个配置文件：

MathJax.Hub.Config({
  extensions: ["tex2jax.js"],
  jax: ["input/TeX", "output/SVG"],
  tex2jax: {
    inlineMath: [
      ['$', '$'],
      ["\(", "\)"],
    ],
    displayMath: [
      ['$$', '$$'],
      ["\[", "\]"]
    ],
    processEscapes: true
  },
  "SVG": {
    availableFonts: ["TeX"]
  }
});

然后将调用渲染API，转为美观的LaTex效果，如下。由于渲染很慢，所以渲染过程是一个异步执行的队列。

MathJax.Hub.Queue(['Typeset', MathJax.Hub]);

KaTex

相对于 MathJax， KaTex 是后起之秀，是可汗学院的公式渲染方案。API 设计，对前端工程师更加友好。KaTex 的特点是渲染很快，KaTex 的 API 是一个同步调用。

katex.render("c = \pm\sqrt{a^2 + b^2}", element);

KaTex 由于发展比较晚，大约 2013 年，对 LaTex 语法的支持程度可能不如 MathJax，比如不支持中文。
KaTex 也支持服务器端渲染。

var html = katex.renderToString("c = \pm\sqrt{a^2 + b^2}");
//=> <span class="katex">...</span>

MathQuill

跟 MathJax、KaTex 不同，MathQuill 是一个真正意义上的公式编辑器，一边输入一边渲染，输出可以是 Tex，但是对于复杂的公式，这种输入方式还是有很大的局限性，输入过程还是需要记住一些 LaTex 命令。

使用 MathJax、KaTex方案的共同问题是用HTML、CSS来渲染公式，非常冗长，如果采用了服务器端渲染，很容易超出数据库字段的长度限制，一个简单的公式，就会产生很多 HTML 结构。

参考资料

https://cloud.tencent.com/developer/article/1015883