工具介绍：刷新 Mathjax 格式化程序

简介

本工具是一个 Javascript 函数，用于刷新 Mathjax 渲染的页面，使之重新对公式进行排版和显示。当使用 Mathjax 渲染数学公式时，如果页面内容发生变化，通常需要手动触发 Mathjax 的渲染才能正确显示公式，并且在某些情况下需要多次刷新才能生效，非常麻烦。使用本工具可以方便地自动刷新 Mathjax 渲染的内容。

功能

本工具可以通过调用 Mathjax 提供的 API，实现以下功能：

• 刷新所有 Mathjax 渲染的内容
• 刷新指定区域内的 Mathjax 渲染的内容
• 按需刷新部分 Mathjax 渲染的内容，提高渲染效率

使用方法

使用本工具非常简单，只需要引入相关的 Javascript 文件，并在需要刷新 Mathjax 的时候调用相应的函数即可。

/**
 * 刷新 Mathjax 渲染的内容
 */
function refreshMathjax() {
    if (typeof MathJax !== 'undefined') {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    }
}

/**
 * 刷新指定区域内的 Mathjax 渲染的内容
 * @param {string|HTMLElement} parent 父元素的 ID 或者对象
 */
function refreshMathjaxInParent(parent) {
    if (typeof MathJax !== 'undefined') {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, parent]);
    }
}

/**
 * 按需刷新部分 Mathjax 渲染的内容
 * @param {Array} elements 元素数组
 */
function refreshMathjaxInElements(elements) {
    if (typeof MathJax !== 'undefined') {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, elements]);
    }
}

示例

假设我们的页面中有一个数学公式需要渲染，公式内容为：

\frac{dy}{dx} = \lim_{h\to 0} \frac{f(x+h) - f(x)}{h}

我们可以在页面的 head 标签中引入 Mathjax 的 Javascript 文件：

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

然后在需要显示公式的地方加上相应的 HTML 和 CSS 样式：

<p>本文介绍 Mathjax 渲染工具：</p>
<div class="mathjax">
    $\frac{dy}{dx} = \lim_{h\to 0} \frac{f(x+h) - f(x)}{h}$
</div>

其中 class="mathjax" 的元素会被自动渲染为数学公式。如果在页面加载时公式已经正确渲染，则不需要进行刷新操作；但如果页面的内容发生了变化，需要重新进行渲染。

我们可以在页面的底部加上一个按钮，点击时自动刷新所有 Mathjax 渲染的内容：

<button onclick="refreshMathjax();">刷新公式</button>

也可以只刷新特定区域内的公式，例如：

<div id="content">
    <p>这里是需要刷新的内容。</p>
    <div class="mathjax">
        $\frac{dy}{dx} = \lim_{h\to 0} \frac{f(x+h) - f(x)}{h}$
    </div>
    <p>这里是需要刷新的内容。</p>
</div>
<button onclick="refreshMathjaxInParent('content');">刷新公式</button>

或者按需刷新部分公式，例如：

<div class="mathjax" id="eq1">
    $\frac{dy}{dx} = \lim_{h\to 0} \frac{f(x+h) - f(x)}{h}$
</div>
<div class="mathjax" id="eq2">
    $\frac{d^2y}{dx^2} = \lim_{h\to 0} \frac{f(x+h) - 2f(x) + f(x-h)}{h^2}$
</div>
<button onclick="refreshMathjaxInElements(['eq1', 'eq2']);">刷新公式</button>

支持性

本工具可以在所有支持 Mathjax 的浏览器，包括 Chrome、Firefox、Opera、Safari 和 IE9 及以上版本中使用。如果浏览器不支持 Mathjax，则无法正确显示数学公式。