mathjax 3 的配置问题

problems with configuration of mathjax 3

在我的应用程序中配置 Mathjax v.3 时,我有一个带有三个选项的问题。反映问题的最小代码是一个 html 文件和两个 js 文件,一个是从 github 下载的 tex-svg.js ,另一个是我的 mathjax 配置文件。 HTML 文件的内容为

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>title</title>
    <script type="text/javascript" src="test_files/mathjax-config.js"></script>
    <script type="text/javascript" src="test_files/tex-svg.js" async=""></script>
</head>
<body>
first we have +\tan(\alpha)^2=\frac{1}{\cos(x)^2}$, then we have $$\int_a^b f(x,\tau,\epsilon)\,dx$$ and last we would have<br>\begin{align}<br>\sin(x)<br>\end{align}<br>and then continue by going to the next line ...<br>... right here
</body>
</html>

配置文件内容如下

window.MathJax = {
    options: {
        renderActions: {
            addMenu: [],
            //checkLoading: []
        }
    },
    loader: {
        //load: ['[tex]/tagFormat']
    },
    tex: {
        inlineMath: [ ["$","$"] ],      // ["$","$"],["$","$"],["\(","\)"],["\(","\)"]
        displayMath: [ ["$$","$$"] ],
        processEscapes: true,           // for $ to mean a common dollar sign, not a math delimiter

        //ignoreHtmlClass: 'tex2jax_ignore',    // divs with class "tex2jax_ignore" are NOT to be rendered
        //processHtmlClass: 'tex2jax_process'   // divs with class "tex2jax_process" are to be rendered

        //processEnvironments: true,        // process \begin{xxx}...\end{xxx} outside math mode
        //processRefs: true,                // process \ref{...} outside of math mode

        packages: {'[+]': ['tagFormat','includeHtmlTags','skipTags']},

        skipTags: ["script", "style", "textarea", "pre", "code"],   //their contents won't be scanned for math
        includeHtmlTags: {br: '\n', wbr: '', '#comment': ''},   //  HTML tags that can appear within math

        digits: /^(?:[\d۰-۹]+(?:[,٬'][\d۰-۹]{3})*(?:[\.\/٫][\d۰-۹]*)?|[\.\/٫][\d۰-۹]+)/,    // introduce numbers

        tagSide: "right",
        tagIndent: ".8em",
        multlineWidth: "85%",
        tags: "ams",
        tagFormat: {
            number: function(n){
                return n.replace(/0/g,"۰").replace(/1/g,"۱").replace(/2/g,"۲").replace(/3/g,"۳")
                        .replace(/4/g,"۴").replace(/5/g,"۵").replace(/6/g,"۶").replace(/7/g,"۷")
                        .replace(/8/g,"۸").replace(/9/g,"۹");
            }
        }
    },
    svg: {
        fontCache: 'global',        // or 'local' or 'none'
        mtextInheritFont: true,     // required to correctly render RTL Persian text inside a formula

        scale: 0.97,                // global scaling factor for all expressions
        minScale: 0.6               // smallest scaling factor to use
        //matchFontHeight: true,        // true to match ex-height of surrounding font
        //exFactor: .5,             // default size of ex in em units

        //displayAlign: 'center',       // default for indentalign when set to 'auto'
        //displayIndent: '0'            // default for indentshift when set to 'auto'
    },
    chtml: {
        mtextInheritFont: true,     // required to correctly render RTL Persian text inside a formula

        scale: 0.97,                // global scaling factor for all expressions
        minScale: 0.6               // smallest scaling factor to use
        //matchFontHeight: true,        // true to match ex-height of surrounding font
        //exFactor: .5,             // default size of ex in em units

        //displayAlign: 'center',       // default for indentalign when set to 'auto'
        //displayIndent: '0',           // default for indentshift when set to 'auto'
        //adaptiveCSS: true         // true means only produce CSS that is used in the processed equations
    }
};

问题在于这些选项: skipTagsincludeHtmlTagstagFormat 我使用的任何一个,都会在控制台中写入一个错误,显示无效选项,因为没有默认值。据我所知,这个错误表明这些都没有加载,但我不知道该怎么做。添加像 load: ['[tex]/tagFormat'] 这样的代码会在找不到特定地址中的 js 文件时产生另一个错误,而 MathJax3 似乎应该是一个单一文件的解决方案。

我哪里错了?什么是解决方案? 提前致谢

关于 skipHtmlTagsincludeHtmlTags 和其他一些选项的文档中存在错误。它们应该在 options 子对象中,而不是 tex 主题中。另外,它是 skipHtmlTags,而不是 skipTags

至于tagFormat,它没有包含在基础tex-sag.js文件中,所以你需要单独加载它。由于您只复制了基础 tex-svg.js 文件,而没有复制 tagFormat 组件,这将导致加载失败(您收到的消息)。如果您托管自己的副本,最好安装完整的 MathJax 发行版,否则可能会出现此类加载问题。否则,您可能需要使用 tex-svg-full.js 文件,其中包含几乎所有的 TeX 扩展。

这是一个工作示例,使用 CDN 和 tex-svg.js,同时手动加载 tagFormat 扩展(因此初始下载较小)。

<script>
window.MathJax = {
    options: {
        renderActions: {
            addMenu: []
        },
        skipHtmlTags: ["script", "style", "textarea", "pre", "code"],   //their contents won't be scanned for math
        includeHtmlTags: {br: '\n', wbr: '', '#comment': ''},   //  HTML tags that can appear within math
    },
    loader: {
        load: ['[tex]/tagFormat']
    },
    tex: {
        inlineMath: [ ["$","$"] ],
        displayMath: [ ["$$","$$"] ],
        processEscapes: true,
        packages: {'[+]': ['tagFormat']},
        digits: /^(?:[\d۰-۹]+(?:[,٬'][\d۰-۹]{3})*(?:[\.\/٫][\d۰-۹]*)?|[\.\/٫][\d۰-۹]+)/,    // introduce numbers
        tagSide: "right",
        tagIndent: ".8em",
        multlineWidth: "85%",
        tags: "all",
        tagFormat: {
            number: function(n){
                return String(n)
                        .replace(/0/g,"۰")
                        .replace(/1/g,"۱")
                        .replace(/2/g,"۲")
                        .replace(/3/g,"۳")
                        .replace(/4/g,"۴")
                        .replace(/5/g,"۵")
                        .replace(/6/g,"۶")
                        .replace(/7/g,"۷")
                        .replace(/8/g,"۸")
                        .replace(/9/g,"۹");
            }
        }
    },
    svg: {
        fontCache: 'global',        // or 'local' or 'none'
        mtextInheritFont: true,     // required to correctly render RTL Persian text inside a formula
        scale: 0.97,                // global scaling factor for all expressions
        minScale: 0.6               // smallest scaling factor to use
    }
};
</script>
<script id="MathJax-script" async
   src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

Testing math:

\begin{align}
\sqrt{x^2<br>
+1}
\end{align}

我保留了 skipHtmlTagsincludeHtmlTags 选项,尽管它们是默认值并且可以删除。此外,tagFormat.number 函数接收的是 数字 而不是字符串,因此您需要先从中创建字符串,然后才能进行替换。

最后,这个例子指出 tagFormat 扩展和 ams 标签格式之间存在时间问题(直到 ams 扩展之后才可用已注册),所以我现在使用 all 标记。我将为此提交错误报告。


编辑

这是一个包含补丁的版本,该补丁覆盖了 tagFormat 扩展,并正确处理了 ams 标签。在 MathJax 修复之前,您可以暂时使用它。

<script>
window.MathJax = {
    loader: {
        load: ['[tex]/tagFormat']
    },
    startup: {
      ready: function () {
        var Configuration = MathJax._.input.tex.Configuration.Configuration;
        var TagsFactory = MathJax._.input.tex.Tags.TagsFactory;
        var tagFormatConfig = MathJax._.input.tex.tag_format.TagFormatConfiguration.tagFormatConfig;
        var TagformatConfiguration = MathJax._.input.tex.tag_format.TagFormatConfiguration.TagformatConfiguration;
        Configuration.create('tagFormat', {
          config: function (config, jax) {
            var tags = jax.parseOptions.options.tags;
            if (tags !== 'base' && config.tags.hasOwnProperty(tags)) {
              TagsFactory.add(tags, config.tags[tags]);
            }
            return tagFormatConfig(config, jax);
          },
          configPriority: 5,
          options: TagformatConfiguration.options
        });
        return MathJax.startup.defaultReady();
      }
    },
    tex: {
        packages: {'[+]': ['tagFormat']},
        tags: "ams",
        tagFormat: {
            number: function(n){
                return String(n)
                        .replace(/0/g,"۰")
                        .replace(/1/g,"۱")
                        .replace(/2/g,"۲")
                        .replace(/3/g,"۳")
                        .replace(/4/g,"۴")
                        .replace(/5/g,"۵")
                        .replace(/6/g,"۶")
                        .replace(/7/g,"۷")
                        .replace(/8/g,"۸")
                        .replace(/9/g,"۹");
            }
        }
    }
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

Testing math:

\begin{align}
\sqrt{x^2<br>
+1}\qquad \text{with AMS number}
\end{align}

$$
\sqrt{x^2+1}\qquad\text{with no number}
$$

为了使这个示例更清晰一些,我删除了在其中不起作用的选项。