I have a probem with three options while configuring Mathjax v.3 in my application. The minimal code to reflect the problem is an html file and two js file, one being tex-svg.js downloaded from github and the other being my configuration file for mathjax. Content of the HTML file reads
<!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>
and the content of the configuration file is as what follows
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
}
};
The problem is with these options:
skipTags, includeHtmlTags, and tagFormat
any of them which I use, an error is written in console which says Invalid option as there is no default value. As far as I have learned, this error shows these are not loaded, but I don't know how to do so. Adding codes like load: ['[tex]/tagFormat'] gives another error when it cannot find the js file in a specific address, while MathJax3 is seemingly supposed to be a one single file solution.
Where am I wrong? and what's the solution? Thanks in advance
There is an error in the documentation concerning the skipHtmlTags, includeHtmlTags and a few other options. They should be in the options sub-object, not the tex subject. Also, it is skipHtmlTags, not skipTags.
As for tagFormat, it is not included in the base tex-sag.js file, so you do need to load it separately. Since you have only copied the base tex-svg.js file, and no the tagFormat component, that will lead to a load failure (the message you are getting). It would be better if you installed the complete MathJax distribution if you are hosting your own copy, otherwise these kinds of load problems can occur. Otherwise, you might want to use the tex-svg-full.js file, which includes nearly all the TeX extensions.
Here's a working example, using the CDN, and tex-svg.js, while loading the tagFormat extension by hand (so the initial download is smaller).
<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}I've left in the skipHtmlTags and includeHtmlTags options, even though these are the defaults and they could be removed. Also, the tagFormat.number function receives a number not a string, so you need to create the string from it before you can do the substitutions.
Finally, this example has pointed out that there is a timing issue between the tagFormat extension and the ams tag format (which isn't available until after the ams extension is registered), so I've used the all tagging for now. I will submit a bug report for that.
Edit
Here's a version that includes a patch that overrides the tagFormat extension with one that handles the ams tags properly. You can use it for now until MathJax is fixed.
<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}
$$I've removed the options that don't play a role in this in order to make this example a bit cleaner.