I am using Mathjax to display equations in an HTML. This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Math in HTML</title>
<meta charset="utf-8">
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<h1>Mathematic equations</h1>
<p>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.
</p>
</body>
</html>
The problem is that I cannot select the equations. Previously I was using this in the header:
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
which produces "selectable equations" but raises a deprecation warning. (I tried to insert another snippet with this working example but StackOverflow complained it was too much code.)
I cannot find out how to convert the equations into "selectable".
You are correct that MathJax output can't be copied directly from the page in version 3. Version 3 uses CSS with content properties in order to insert the characters into the page, and content text is not selectable in the page.
In general, copying MathJax output would only be reliable with the simplest of expressions (nothing involving super- or subscripts, fractions, roots, arrays, multi-character stretchy delimiters, accents, etc.), so this was never a supported feature for MathJax.
On the other hand, it would be possible for MathJax to insert the characters directly rather than use content CSS, and an extension to implement that would be possible. Example code for doing that is available in the MathJax User's Forum.
Related
I am using MathJax to display some equations in an HTML document. What I want to do is explained in the following snippet:
<!DOCTYPE html>
<html>
<head>
<title>Math in HTML</title>
<meta charset="utf-8">
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<h1>Mathematic equations</h1>
<p>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.
</p>
<p>I would like that when someone copy-pastes the previous paragraph he/she would get:
<code>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.</code>
</body>
</html>
Basically I would like to make the math selectable and when copied into the clipboard to get the Latex code. Is this possible?
This seems to be a common problem: Stray start tag returned by the Nu HTML Checker. My HTML reads </body>, while the Checker says </body>↩<script>'undef. The only usage of <script> is as follows:
<script src="Sternheimer.js"></script>
<!--<script src="../jquery-2.1.4.min.js"></script>-->
<script src="../jquery-3.1.1.min.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$']]
},
menuSettings: { inTabOrder: false }
});
</script>
<script type="text/x-mathjax-config">
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
MathJax.Hub.Config({
"HTML-CSS": { scale: 90 }
});
}
</script>
<script src="../MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="initializeForm.js"></script><!--run on page load-->
<script src="formFields.js"></script><!--reveal additional fields-->
<script src="../smoothScroll.js"></script>
<script src="../backToTop.js"></script>
... which is of course inside <head>. SO search results say the Checker could be misinterpreting comments, which I've checked by getting rid of <!--<script src="../jquery-2.1.4.min.js"></script>--> but the error persists. My markup is always validated using the W3C extension in Brackets. Please see the Nu result here. Any help resolving this mystery will be appreciated.
Update | Viewing the source on my hosting's server, I discovered the following was appended to my original markup: <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'a2plcpnl0819'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script>. Mystery solved, and this appears to be fixable. Thank you for your help.
It is not a bug. I can type curl http://handcrafted.codes/Sternheimer/Sternheimer.htm and see the script tag after the body end tag.
Presumably you are using hosting which injects snoop code at the end of HTML documents.
I am trying to learn how to display math equations with MathJax. I tweaked this code from codepen and this works fine:
`<!DOCTYPE html>
<head>
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<style>
p {
font-size: 22px;
}
</style>
</head><body>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [['$', '$']] },
elements: ['math']
});
</script>
<p id="math">
Find the value of:
$\Huge{\frac {3.41 \times 10^3}{1.80 \times 10^2}}$
and enter the answer within the box.
</p>
`
However, when I add one more paragraph and enter math in there, it does not display as math. It just displays like text. Any suggestions? Thank you.
Include your next paragraph id in the elements: ['math'] array in your MathJax config.
I am having trouble with MathJax. It is not rendering content after the Ajax call. I tried calling
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
But it seems to be not working. What am I doing wrong?
Also, if I try to include the non-deprecated src url to mathjax given on their website, mathjax doesn't work completely for me.
<!DOCTYPE html>
<html>
<head>
<title>MathJax AsciiMath Test Page</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['\\[','\\]'], ['$$','$$']]}});
</script>
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<button type="button">Math</button>
<div class='math'>
<p>\[x(n+1)=x(n)+dt*v(n)\]</p>
</div>
<script>
$(function(){
$('button').on('click', function(){
console.log('click');
var myCustomEvent = new Event('ReloadMath');
document.dispatchEvent(myCustomEvent);
});
$.get('/text', function(text){
$('.math').append("<p>Hi</p>");
$('.math').append("<p>\[x(n+1)=x(n)+dt*v(n)\]</p>");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
});
});
document.addEventListener('ReloadMath', function () {
console.log('reload math');
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
});
</script>
</body>
</html>
The backslash (\) is an escape character in JavaScript and when Javascript finds a backslash in a String, it will try to escape the character after it. To show a backslash in a String, you will need to escape it with a preceding backslash, meaning that you will need two backslashes to display one backslash i.e. \\.
You will need to change
$('.math').append("<p>\[x(n+1)=x(n)+dt*v(n)\]</p>");
To
$('.math').append("<p>\\[x(n+1)=x(n)+dt*v(n)\\]</p>");
I have come across a tool called princexml that can convert html+css into pdf beautifully (see this video). With this it's even possible to write a PhD thesis using entirely html+css and get a nice pdf output in the end. But it seems it does not handle mathjax well. I guess this is because the mathjax part much be rendered in a browser first.
So I have a simple html file like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test math</title>
<style type="text/css">
</style>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
</head>
<body>
$x^2 + y^2 = 1$
</body>
</html>
After conversion using princexml:
prince --javascript x.html -o x.pdf
the equation is rendered verbatim in the pdf.
Is there a way to make this work?
This is because princexml doesn't yet support setTimeout method which Mathjax uses for its asynchronous functions. There are two workarounds:
Render your html in the browser such as Chrome first. Get the entire document (not the source but actual rendered document) saved into html file and then use it as input to prince. You can get entire rendered document from browser javascript console.
Second method is to use a headless browser like phantomjs. See also
https://web.archive.org/web/20150503191319/http://www.lelesys.com/en/media/technology/phantomjs-as-screen-capture-to-generate-image-pdf-files.html