【问题标题】:problems with configuration of mathjax 3mathjax 3 的配置问题
【发布时间】:2019-09-14 20:58:06
【问题描述】:

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

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

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

【问题讨论】:

    标签: mathjax


    【解决方案1】:

    关于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 标记。我会为此提交一份错误报告。


    编辑

    这是一个版本,其中包含一个修补程序,该修补程序使用正确处理 ams 标记的修补程序覆盖 tagFormat 扩展名。在 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}
    $$

    为了让这个例子更简洁,我已经删除了在这方面不起作用的选项。

    【讨论】:

    • 感谢您的详细说明,但将您修改后的配置代码复制到我的配置文件中,并通过&lt;script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg-full.js"&gt;&lt;/script&gt; 调用tex-svg-full.js,而不是公式中的&lt;br&gt; 被跳过而不是tagFormat get去工作。您能否添加一个有效的 sn-p 或将我引导到一个有效的示例?
    • 非常感谢,现在可以正常使用了。只有一件事,如果在我的代码中我有&lt;br&gt;\begin{align}...,它会抛出错误消息Q.splitText is not a function,而如果我只在&lt;br&gt; \begin{align}... 中放置一个空格,则错误得到解决,并且如您的示例中那样排版数学。也许这是一个错误,或者我看不到它背后的意义?总而言之。一如既往的好答案,再次感谢您
    • 是的,看起来像一个错误。我也会为此提交一个错误。
    • @owari,我添加了另一个示例,其中包含一个允许tagFormatams 标签一起工作的补丁。它包括一个美元除名表达式,以表明它正在使用 AMS 编号,而不是像前面的示例中那样对 all 表达式进行编号。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-11-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-12
    相关资源
    最近更新 更多