欢迎光临
我们一直在努力

在 Hexo 中完美使用 Mathjax 输出数学公式

本文主要讲述怎样在 Hexo 中使用 Mathjax 和 怎样解决 MarkdownMathjax 的一些冲突的问题. 目前在纯正的 Markdown 里我没找到如何让 MathjaxHexo 完美共存的方法. 所以我的标题还是夸张了点…

新更新一种解决 Markdown 和 Mathjax 冲突的一种方法. 即为 更换Hexo的markdown渲染引擎, 需要先卸载 hexo-renderer-marked,再安装 hexo-renderer-markdown-it-plus 插件. 见下文.

常规方法

在 Hexo 中使用 Mathjax 最常规的方法就是主题的 after_footer.ejs 里加入 (该 Mathjax 代码根据 Math StackExchange 所用修改)

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
        tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno",skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']},
        TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
        messageStyle: "none"
    }); 
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i  = 1) {
            all[i].SourceElement().parentNode.className  = ' has-jax';
        }
    });
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

接下来的使用方法就和平常使用 Mathjax 一样了.

PS: mathsize: "90%" 这里可以适当修改 Mathjax 公式的大小. 如果需要给公式编号的话, 则需要如下

    MathJax.Hub.Config({
        TeX: {equationNumbers: {autoNumber: ["AMS"], useLabelIds: true}},
        "HTML-CSS": {linebreaks: {automatic: true}},
        SVG: {linebreaks: {automatic: true}}
    });

另外我们也可以重新定义命令, 例如我所使用的

<script type="text/x-mathjax-config">
                    MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"],scale: 90, linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50), },
                    tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" },
                     TeX: {  equationNumbers: {autoNumber: ["AMS"], useLabelIds: true},noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}",beq:"\\begin{eqnarray}",eeq:"\\end{equation}",sln:"{\\mathfrak{sl}}",h:"{\\mathfrak{h}}",g:"{\\mathfrak{g}}",gl:"{\\mathfrak{gl}}",la:"\\lambda",La:"\\Lambda",mc:"\\mathcal",m:"\\mathrm",mf:"\\mathbf",lle:"\\leqslant",gge:"\\geqslant",mb:"\\mathbb",N:"{\\mathbb{N}}",Z:"{\\mathbb{Z}}",ch:"{\\mathrm{ch}}",R:"{\\mathbb{R}}",C:"{\\mathbb{C}}",vp:"{\\varphi}",e:"{\\epsilon}" } },
                                        messageStyle: "none"
                }); 
</script>

其中, 这段就是

Macros: { href: "{}",beq:"\\begin{eqnarray}",eeq:"\\end{equation}",sln:"{\\mathfrak{sl}}",h:"{\\mathfrak{h}}",g:"{\\mathfrak{g}}",gl:"{\\mathfrak{gl}}",la:"\\lambda",La:"\\Lambda",mc:"\\mathcal",m:"\\mathrm",mf:"\\mathbf",lle:"\\leqslant",gge:"\\geqslant",mb:"\\mathbb",N:"{\\mathbb{N}}",Z:"{\\mathbb{Z}}",ch:"{\\mathrm{ch}}",R:"{\\mathbb{R}}",C:"{\\mathbb{C}}",vp:"{\\varphi}",e:"{\\epsilon}" } }

例如, 如果我要输出 \epsilon, 现在我只要输入 \e 即可.

不过这个方法有个令人不爽的缺点, 众所周知加载 Mathjax 的数学公式时是很消耗资源和时间的. 即使在网页中并没有生成公式时, 也会加载最基本 MathJax.js, 而这个文件也有 58KB. 为解决这个问题可参考如下进阶版.

进阶版

我们可以考虑只有在用到公式的页面才加载 Mathjax, 因此需要加载一些控制.

首先将上面的代码写成一个 mathjax.ejs 文件放在 partial 目录下, 并且在 Hexo 的根目录的 _config.yml 里面加入 mathjax: true, 接下来在 after_footer.ejs 里加入

<% if (page.mathjax){ %>
<%- partial('mathjax') %>
<% } %>

在文章需要调用 Mathjax 时, 只需在 front-matter 前加上 mathjax: true 即可, 即

title: 测试Mathjax
date: 2014-2-14 23:25:23
tags: Mathmatics
categories: Mathjax
mathjax: true
---

缺点

Markdown 里使用 Mathjax 有一个很大的缺点, 比如下面这个问题.

博主你好,你这样用mathjax,在用markdown写博客时能正常书写带下标的公式吗?
比如下面一段话:
This is an example for $x_mu$ and $y_mu$.
两个`—`会被看成markdown中的斜体。

这个的解决办法可以使用转义符, 即如下输出即可

This is an example for $x\_mu$ and $y\_mu$.

解决办法

除了上述方法以外, 还有下面几种.

插件

安装插件 Hexo-math, 安装方法如下, 依次为

$ npm install hexo-math --save

Hexo 文件夹中执行:

$ hexo math install

_config.yml 文件中添加:

plugins:
 - hexo-math

对于不含特殊符号的公式,可以直接使用 MathJaxinline math 表达式. 如果含有特殊符号,则需要人肉 escape,如 \ 之类的特殊符号在 LaTex 表达式中出现频率很高,这样就很麻烦,使用 tag 能够省不少事。

具体用法见 Hexo MathJax插件.

更换Hexo的markdown渲染引擎

更换 Hexomarkdown 渲染引擎,用 hexo-renderer-markdown-it-plus 引擎替换默认的渲染引擎 hexo-renderer-marked 即可。

先卸载 hexo-renderer-marked,再安装 hexo-renderer-markdown-it-plus 插件.

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it-plus --save

安装插件后,如果未正常渲染 `LaTeX` 数学公式,在博客配置文件 `_config.yml` 中添加

markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’
  plugins:
    - plugin:
        name: markdown-it-katex
        enable: true
    - plugin:
        name: markdown-it-mark
        enable: false

该方法来自: 如何在Hexo中使用Mathjax渲染LaTeX数学公式

使用 Pandoc 编译

即更换 Markdown 解析器, 使用语法更 strongpandoc-markdownhexo 下可使用 hexo-renderer-pandoc

貌似我用了没使用出效果…, 不知道为什么

修改 Markdown

该冲突主要是由于对 \_ 的转义造成的。找到 marked 脚本文件, 通常在

hexo\node_modules\marked\lib\marked.js

先备份一下,然后修改第449行

escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,

escape: /^\\([`*\[\]()#+\-.!_>])/,

第847行

 return '' + text + '';

修改为:

 return '_' + text + '_';

一般来说不推荐修改.

转载请注明:满忘近 » 在 Hexo 中完美使用 Mathjax 输出数学公式

相关推荐

  • 暂无文章

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    你好,请问一下你的代码高亮,行号格式是怎么弄的?

    轻云10个月前 (08-17)回复
    • 你说的是 WordPress 还是 Hexo? 我用的不是 Hexo, 是 WordPress. 是通过插件 Crayon Syntax Highlighter 实现的.

      Clanzd10个月前 (08-21)回复