Latex展示环境配置方案

结论

对Markdown文件, 需要使用 pandoc+MathJax.

或者,可以使用 AsciiDoc文件+MathJax.

MathJax

浏览器中, 一般需要使用MathJax进行渲染.

使用CDN(jsdelivr)

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

提供本地副本

npm install mathjax@3
cp -r node_modules/mathjax/es5/ TARGET_DIR

添加到模板中

在html head的配置项中添加script标记即可.

以 hugo+PaperMod 主题配置为例:

PaperMod 提供了layouts/partials/extend_head.html用于自定义配置, 因此添加到该文件即可:

# 注意: 不需要修改主题中的文件, 而是写入到项目文件夹
mkdir -p layouts/partials/
cat <<EOF >> layouts/partials/extend_head.html
{{- if (.Param "mathjax") }}
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style> .MathJax { overflow-x: auto; overflow-y: hidden; } </style>
{{- end }}
EOF

如果使用了本地副本的方案, 需要相应地修改script里的地址.

这里的css是为了解决默认配置下存在的一个问题: 手机上展示公式超宽时, 将导致页面宽度被改变.

参考了这个回答以及实际生成的html.

Pandoc和AsciiDoctor

Markdown默认会对一些字符进行处理, 导致Tex代码无法正常渲染.

例如默认配置+Mathjax中的 #复杂示例1 和 #复杂示例2, 分别存在换行不正确和无法解析的问题.

检查原始输出后可以发现, 是因为换行符(\\)被转义, 下划线被视为Markdown语法(加粗)导致的.

相比之下, AsciiDoc格式因为存在++++的passthrough方案, 因此更不容易出现问题.

当然, 两者的语法并不一致, 不过Latex这部分还是可以大致比较一下的.

两者都需要安装外部软件, 但都可以简单地使用apt-get install pandoc asciidoctor完成.

几种方案的最终展示效果分别如下:

可以在这几个页面查看原始输出:

其他可能的方案

手动Escape

理论上是可行的, 但有个问题是手动修改太累且容易出错, 并且手动处理后的文件本地预览/转换时可能会有问题.

自动Escape

通过hooks进行自定义的处理, 实现出现$$代码段时原样保留内部文本.

实现起来可能会比较麻烦, 感觉不如直接安装一个pandoc了.

结论#

MathJax#

使用CDN(jsdelivr)#

提供本地副本#

添加到模板中#

Pandoc和AsciiDoctor#

其他可能的方案#

结论