WordPress 实现Latex支持

参考文章 使用 MathJax 在 WordPress 中显示数学公式

我选择的插件组合是 Jetpack(Markdown实现) + MathJax-Latex(Latex解析) + Crayon Syntax Highlighter(代码高亮)

目前修改为: 在自己的笔记本上写好 Markdown 的博客 (推荐使用 Typora), 然后使用 Pandoc 将 Markdown 转为 Html, 然后直接拷贝粘贴到 WordPress, 同时使用 MathJax-Latex + Wp Code Highlight.js 插件组合, Jetpack 还是安装了,但并什么实际用处

使用这套方案的好处是 Pandoc 会将需要渲染成 MathJax 的部分全部标记为 math inline 或者 math display,然后启用 Mathjax 实时渲染,perfect !!
注意: 由于需要兼容 Latex 语法, Pandoc 使用的语句是:

pandoc -i xxx.md -o xxx.html --mathjax

请参考这篇文章 pandoc user guide

1. 使用 Jetpack 插件

使用 Jetpack 实现 Markdown 语法,在 Jetpack 控制面板中“设置”一栏有一个选项是 “使用纯文本 Markdown 语法撰写文章或编写页面
如果勾选,可以直接支持 Markdown 语法,但对 Latex 兼容性不好,这是我放弃这个方案的主要原因

2. 使用 MathJax-LaTeX 插件

MathJax-LaTeX 安装并启用插件后,默认并不会启用 MathJax 的渲染功能,需要在文章开头添加 这个标记,该文章才会启用 MathJax 渲染,可以防止意外渲染了不需要渲染的文章,特别是像下面开启 $ 定界符后。

在修改完后,请在打开 WordPress 后台,在外观/编辑下,编辑 header.php,在 <?php wp_head(); ?> 前加入:

<script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>

下面这种方案已放弃,自然不会 Latex 转义混乱的问题

3. 启用 $ 定界符

如果你之前通过其他方式使用了 $...$ 来显示行内公式(比如开头的两个),那么启用 MathJax 的 $...$ 定界符会减少很多迁移工作。启用方式也很简单,打开 WordPress 后台,在外观/编辑下,编辑 header.php 文件,在 </head; ?> 前加入:

MathJax 默认使用 $$...$$\[...\] 定界符来显示公式块,使用 \(...\)$...$ 定界符来显示行内公式,但使用 $...$ 显示行内公式的方式默认是禁用的,因为 $ 符号出现比较频繁,如连续的几个美元价格,容易误触发渲染。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

4. 使用转义的 \

在 WordPress 中使用 MathJax 时,一些 \ 需要转义为 \\。比如换行的 \\ 需要转义为 \\\\\[...\] 定界符也需要转义为 \\[...\\] 等。而一些特定用法前的 \ 则不需要转义,如 \begin、\frac 等。
还有: * 由于也被 Markdown 所使用,记得也要用 \* 转义,建议用 \ast
类似的还有 {} ,建议用 \lbrace\rbrace

注意经常会出现 _ 被Mardown 语法解析,通常是在同一行出现 两个 _ 有这个问题

7 thoughts on “WordPress 实现Latex支持

      1. 你好,我有两个问题想请教一下:
        1. 使用你的解决方案在Wordpress上面写post,是不是需要将代码部分和文字部分分开来写:文字部分(包括LaTeX的公式)用Typora写好,然后用pandoc转成html;代码部分在Wordpress的编辑器里面用Crayon填写?
        2. 这种方法可以给LaTeX公式编号吗?
        不胜感激。

        1. 1. 代码也是在 typora 写的,crayon 直接可以渲染
          2. 可以加编号,但需要自己在 latex 里面写编号数字,如 `\tag {1}`

          1. 请问你是怎么设置 crayon 的呢?我的博客发表出来的时候,代码里面会有很多多余的标签。
            还有一个遇到的问题,发表出来的表格的格式也跟 Typora 里面写好的不太一样,请问你有遇到这样的问题吗?
            附:测试情况在个人站点的第一篇Blog

          2. 对不起,我刚刚看了一下,我最后用的插件是 Wp Code Highlight.js,不是 crayon。然后表格样式不一致,是因为 typora 不同主题对表格风格有修改,可能要自己修改 css 文件才能达到相同的效果


          3. 上面是pandoc 导出的html 文件的一段c++代码的开头部分,就是从这里开始 crayon 渲染出现了问题:它似乎能识别下面是代码,但是
            标签全部原封不动的显示在最终的代码块里头了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注