Mathjax 3的配置问题

时间:2019-09-14 20:58:06

标签: mathjax

在我的应用程序中配置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 $1+\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
    }
};

问题在于以下选项: skipTags includeHtmlTags tagFormat 我使用的任何一个,控制台中都会写一个错误,指出“无效选项”,因为没有默认值。据我所知,此错误表明未加载这些文件,但我不知道该如何加载。当无法在特定地址中找到js文件时,添加load: ['[tex]/tagFormat']之类的代码会产生另一个错误,而MathJax3似乎应该是一个文件解决方案。

我在哪里错了?那有什么解决方案? 预先感谢

1 个答案:

答案 0 :(得分:3)

文档中关于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函数接收的是 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}
$$

为了使本示例更加简洁,我删除了在其中不起作用的选项。