MathJax is not generating the css class "MathJax_Display" for displayMath with $$ ... $$ delimiters - mathjax

I have set the delimiters for displayMath to \[(...\] and $$..$$ as follow
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ["$$","$$"], ["\\[","\\]"] ],
processEscapes: true,
}
});
</script>
The problem is that when using \[(...\] delimiters, the equation is centered. However, when using $$...$$ it is not but is in a new line. Using Any other delimiters is fine.
Inspecting the code I found that MathJax is not generating the css class "MathJax_Display" when using $$...$$.
To explain more, when I put an equation between \[...\], I get something like this
\[x^2+2x+1=0\] (This will be centered in a new line)
However when I put equation between $$...$$, I get something like this
$$x^2+2x+1=0$$ (This will be in anew line but not centered)
Any suggestions to be able to use $$...$$?

Related

How to render on the same page both asciimath and TeX using mathjax

My usage scenario is to have asciimath as the primary formula engine. However, for some cases I might need more powerful features which I can find only using TeX.
Is there a way to have different open/close clauses one for the regular ascii math (say ` ) and one for TeX using, say $( and )$ ?
So I want to have mix of ascii math and TeX formulae on the same page.
Sure, you can use both!
First simply configure both (assuming MathJax 3):
<script>
MathJax = {
loader: { load: ["input/asciimath", "[tex]/html"] },
tex: {
packages: { "[+]": ["html"] },
inlineMath: [
["$", "$"],
["\\(", "\\)"]
],
displayMath: [
["$$", "$$"],
["\\[", "\\]"]
]
},
asciimath: {
delimiters: [["`", "`"]]
}
};
</script>
Then use the delimiters to signal to MathJax if you want AsciiMath or Latex:
<div>
$$\sum_{n = 100}^{1000}\left(\frac{10\sqrt{n}}{n}\right)$$
</div>
<div>
`sum_(n = 100)^(1000)(frac(10sqrt(n))(n))`
</div>
Remember that AsciiMath requires you to determine whether you want display style or not for the entire document with setting displaystyle: false / true, you can't have both, side by side, as you can for Latex:
asciimath: {
displaystyle: true
}
Code sandbox: https://codesandbox.io/s/mathjax-3-0ve5d

Way to show texerror in MathJax

I'm using cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML-full
When MathJax tries to render $$2^2^x$$, it shows 2^2^x instead of error "Double exponent: use braces to clarify"
What configuration should I use in order to show the error?
Use
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
noErrors: {disabled: true}
}
});
</script>
just before the script that loads MathJax.js itself. That will display the error messages instead of the original TeX code.

problems with configuration of mathjax 3

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.

Regex to match a list of alphanumeric ids of a JSON fragment inside HTML

I'm trying to compose a regular expression to match the following situation:
In a Node.js project I have a multiline string that contains a big HTML code mixed with some JS with this structure:
<html>
<head>
</head>
<body>
<script type="text/javascript">
... more code ...
},
"bookIds" : [
"abc123",
"qwe456",
"asd789"
],
... more code, and in another json:
},
"bookIds" : [
"foo111",
"bar222",
"baz333"
],
... more code ...
</script>
</body>
</html>
My goal is to get the first list of bookIds:
abc123
qwe456
asd789
So, as you can see, the conditions that I'm working with, for now, are:
Search the first "bookIds" : [ appearance and stop at the next ]
I got something like that with: /bookIds" : \[([\S\s]*?)\]/. Yeah, conceptually I though about finding the first string bookIds, start after the first [ after that, and stop before the next ], but I don't know how to do it. I'm now getting documented about lookahead & lookbehinds.
Now I need to search (or loop) inside that match and get what's inside quotes (I know how could I do that individually: /"(.*?)"/)
But unfortunately I've been hours googling and trying and I'm not getting it to work (neither in my Node project nor the tests I'm trying in regex101.com)
Any suggestions will be much appreciated!
You can use "bookIds"\s*:\s*\[([^\]]+?)] Demo
let str = `<html>
<head>
</head>
<body>
<script type="text/javascript">
"bookIds" : [
"abc123",
"qwe456",
"asd789"
],
"bookIds" : [
"foo111",
"bar222",
"baz333"
],
<\/script>
<\/body>
<\/html>`
let op = str.match(/"bookIds"\s*:\s*\[([^\]]+?)]/m)
console.log(op[1].replace(/[\s"]+/g,''))

jquery datatables buttons extension not working (export to PDF, Excel, etc.)

I'm trying to get the buttons extension to work, but I keep getting errors when attempting to initialize the table.
included files:
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="assets/js/pdfmake.min.js"></script>
<script src="assets/js/vfs_fonts.js"></script>
<script src="assets/js/jszip.js"></script>
I have tried including these as well, but I also get errors that I assume are cascading from the original problem. I have commented them out at the moment:
https://cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.flash.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js
Using method 1 to create the table:
$("#generic-list-table").DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
I get the following error in buttons.min.js:
a.init is not a function
When using the second method:
var table = $('#generic-list-table').DataTable();
new $.fn.dataTable.Buttons( table, {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
I get this error:
this.c.dom.container is undefined
I'm copying the examples exactly. I'm at a loss as to what I'm supposed to be doing differently.
I used the example code (https://www.datatables.net/extensions/buttons/examples/initialisation/simple.html) and download all the related references to work local and it works well.
Check this link to download the example with local files.
This is the code to initiallise
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
I was experiencing the same issue but i finally figured it out. You have to load the required files in a correct order.
See if this order sorts your issue
<script src="/js/jquery-2.1.1.js"></script>
<script src="/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/js/plugins/dataTables/dataTables.tableTools.min.js"></script>
<script src="/js/export_data/pdfmake.min.js"></script>
<script src="/js/export_data/dataTables.buttons.min.js"></script>
<script src="/js/export_data/buttons.flash.min.js"></script>
<script src="/js/export_data/vfs_fonts.js"></script>
<script src="/js/export_data/jszip.min.js"></script>
<script src="/js/export_data/buttons.html5.min.js"></script>
Mine worked with this order. It appears like some files use variables in others.
In your case, you will need to have
<script src="assets/js/pdfmake.min.js"></script>
Before
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
Jquery first, pdfmake follows then the others.
check reference in master page and data table page...may be your reference file available in both..remove from one of them is solve problem for me

Resources