I've tryed to embed MathJax into a page to have latex rendered as real formula/expressions however I get no errors nor any rendering. The code is taken directly from the MathJax documentation
I have the following code
var div = MathJax.HTML.Element(
"div",
{id: "MathDiv", style:{border:"1px solid", padding:"5px"}},
["Here is math: \\(x+1\\)",["br"],"and a display $$x+1\\over x-1$$"]
);
document.body.appendChild(div);
that executes with no errors, so MathJax is loaded correctly and there's no errors in the console either. So very little information to go on. Any good suggestion to how I debug this scenario or even better a solution :)
This code works for me.
<!doctype html>
<html>
<head>
<!-- or use the cdn for mathjax source code -->
<script src="../MathJax/MathJax.js">
MathJax.Hub.Config({
jax: ["input/TeX","output/HTML-CSS"],
extensions: ["tex2jax.js"],
tex2jax: {
inlineMath: [ ['\\(','\\)'] ],
displayMath: [ ['$$','$$'] ]
}
});
function doOnLoad() {
var div = MathJax.HTML.Element(
"div",
{id: "MathDiv", style:{border:"1px solid", padding:"5px"}},
["Here is math: \\(x^2+1\\)",["br"],"and a display $$x+1\\over x-1$$"]
);
document.body.appendChild(div);
// This does not seem needed but you can use if to force rendering of a div
// MathJax.Hub.Queue(["Typeset",MathJax.Hub,'MathDiv']);
}
</script>
</head>
<body onload="doOnLoad();">
</body>
</html>
I think you need to add the div in the onload method, so the div is added after the page has been fully parsed.
Related
I want to render some formulas with mathjax-node, but also the user should be able to individually select each of the elements underlining them with the cursor. For example, if a summation appears, he could select the extreme values, the elements of the internal formula, the iteration variable, and so on. It is possible when the elements are rendered as <span> objects, and it can be done for example with MathJax 2.7.7 directly from a URL.
When using MathJax on the browser, I had a page with this configuration:
<!DOCTYPE html>
<html>
<head>
...
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js","[Contrib]/forminput/forminput.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true,
processEnvironments: true,
},
TeX: {extensions: ["AMSmath.js","AMSsymbols.js"]},
displayAlign: 'center',
"HTML-CSS": {
styles: {'.MathJax_Display': {"margin": 0}},
linebreaks: { automatic: true }
}
});
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML"
/>
In that case, if I have this formula $\sum_{i=0}^ni>2$, the result is:
But now I am using mathjax-node downloaded from https://github.com/mathjax/MathJax-node/tarball/master. According to the documentation https://www.npmjs.com/package/mathjax-node I have to put:
var mjAPI = require("mathjax-node");
mjAPI.config({
MathJax: {
// traditional MathJax configuration
}
});
mjAPI.start();
(In the configuration part, it no longer recognizes the line: "extensions: ["tex2jax.js","[Contrib]/forminput/forminput.js"]").
The object with the result is obtained with the typeset function:
var yourMath = '\sum_{i=0}^ni>2';
let result = mjAPI.typeset({
math: yourMath,
format: "TeX", // or "inline-TeX", "MathML"
mml:true, // or svg:true, or html:true
},
And then the part that should be renderized is called with "result.mml", "result.svg" or "result.html".
I have only managed to render as <span> objects with the "html:true" option. But it does not look the same as when I was using MathJax from the web. For example, if put "format:'inline-TeX'", I get:
Something similar was asked here: mathjax-node: different output when formatted on webpage than in node project, and the solution was to add the "css:true" option to the typeset, but I have tried it and it still looks the same. I guess I should still call it as "result.html".
I am answering my own question. If "result" is the returned object, I didn't understand how the "result.css" property should be used. The only thing to do was to include it inside the configuration of the style of the displayed web page. For example, the web page could be:
<html>
<head>
<style>
result.css
</style>
</head>
<body>
result.html
</body>
</html>
What I know
Using Marked Documentation, I am able to create code which renders markdown syntax correctly:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.getElementById('content').innerHTML =
marked('# Marked in browser\n\nRendered by **marked**.');
</script>
</body>
</html>
A real-world webpage with the above example is here.
I am also able to make mathJax inline rendering work, using this answer:
<!from: https://tex.stackexchange.com/questions/27633/mathjax-inline-mode-not-rendering>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
Works nicely (real-world example).
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<!from: https://www.mathjax.org/#gettingstarted>
<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>
<!from: https://stackoverflow.com/a/46511456/8565438>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is an example of MathJax inline rendering: $\dot{u}=\alpha \nabla^2 u$.
Question
How can I combine the Marked and MathJax? I would like to be able to use syntax similar to that of math.stackexchange.com: markdown & MathJax combined.
Expected Output
For example, this text (sorrounded by some JS magic):
Problem
-------
I am having trouble with finding a solution which satisfies the boundary and initial conditions to this PDE:
$$\frac{\partial u}{\partial t} = \frac{\partial ^2 u}{\partial^2x}$$
where $u=u(x,t)$, $0 \leq x \leq L$
with boundary & initial conditions:
BC1: $u(x=0,t>0)=T_f$;
BC2: $u(x=L,t>0)=T_i$;
IC: $u(x,t=0)=f(x)$
should render something like this:
(source)
How can I achieve this?
(JS newbie here)
A quick workaround can be the usage of https://stackedit.io/app
After writing the text you can publish the stuff into HTML (to a cloud drive), and the result gives exactly what you want, e.g. http://hangtarolo.hu/math.html
The result can be embedded via stackedit.js: https://openbase.io/js/stackedit/documentation
On the other hand, there are suggestions for the combined use here: https://hiltmon.com/blog/2017/01/28/mathjax-in-markdown – but for me it did not work. Maybe markdown2 can be fine, but it is only for Mac.
Or a third possibility:
You can use both notation in the same file, but not in same row, as it is in https://hangtarolo.hu/math.php
(The php code is here: https://hangtarolo.hu/math.txt – the php task is only to replace line breaks to "\n".)
I found these sample code from here
The code is like this:
<script>
$("#modal2Button").click(function() {
$("#modal1").fadeOut();
setTimeout(function() {
$("#modal2").fadeIn();
}, 400)
});
$("#close-button").click(function() {
setTimeout(function() {
$("#modal1").fadeIn();
$("#modal2").fadeOut();
}, 1000)
});
</script>
When I paste the jQuery as a separate file and link it inside the <head>
<head>
<script src="sample_code.js"></script>
</head>
and for some reason that does not work?
Any help will be much appreciate!
This is simply a matter of making sure you're using the correct path to your JavaScript file:
<head>
<script src="./sample_code.js"></script>
</head>
Notice the ./ before the file name, which indicates the file is on the same level as your HTML file.
Yes, Definitely it will not work because the DOM Elements are yet not loaded, and you are accessing them, so their will be an error undefined id modal2Button same for the next one.
If you run your js file when all DOM Elements are loaded their will be no problem..
You can do that via following:
Move your script tag at the bottom of html or just before the body tags ends
Use async or defer in <script> | script notes | script tag - async and defer
Use onload function in your js
I am loading a new page with jQuery.load. However, the contents are being treated weirdly somehow. On the original page, I have some code to format latex commands with MathJax:
<script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
And this works fine for the original file. However, when I click on my link and insert more HTML into the page:
<script>
$(document).ready(function(){
$("#link").click(function(){
$("#myDiv").load("test.html");
});
});
</script>
Now the special characters are not formatted by MathJax and are just displayed as-is.
Carols 10cents is close, but you need to do the MathJax.Hub.Queue() call in a callback from the jQuery load() so that the typesetting isn't performed until after the file is loaded. (As it stands, it happens immediately after the file load is requested, even though the file may not be available yet). Something like
<script>
$(document).ready(function(){
$("#link").click(function(){
$("#myDiv").load("test.html", function () {
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "myDiv"]);
});
});
});
</script>
See the examples from a talk I gave at the JMM in January 2013 for more details and the solution to other situations.
MathJax only processes markup on page load by default, so you need to tell it to process again after you load the new content onto the page. The documentation for MathJax for modifying math on the page recommends, if you only want to process only the new content you added, to do something like:
<script>
$(document).ready(function(){
$("#link").click(function(){
$("#myDiv").load("test.html");
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "myDiv"]);
});
});
</script>
They mention a few other ways to do this depending on your application, so I recommend reading that page to find the best way for you.
As far as I know the javascript code can be "defined" as file
<script type="text/javascript" src="script.js"></script>
or as inline code
<script type="text/javascript">
....
// some more code
....
</script>
So, how this is done ? Nevertheless this is javascript code !?!
<script type="text/javascript" src="MathJax.js">
MathJax.Hub.Config({
extensions: ["tex2jax.js", "mml2jax.js"],
jax: ["input/Tex", "input/MathML", "output/HTML-CSS"]
});
</script>
Video configuring MathJax
(Found out from looking at MathJax demos with Chrome's developer tools)
It's programmatically creating new <script> tags and places them inside the <head> tag, rather like http://requirejs.org/ or http://headjs.com/ does.
Something along the lines of
var scr = document.createElement('script');
scr.setAttribute('src', 'path/to/script.js');
headDOMnode.appendChild(src); // 'path/to/script.js' starts to load..
happens when MathJax.Hub.Config() executes.
Edit: head.js and require.js does it with rather a lot more bells and whistles, of course.
This is just some invalid markup. Excerpt from specs follows (note the usage of must rather than should):
If the src attribute is not set, user
agents must interpret the contents of
the element as the script. If the src
has a URI value, user agents must
ignore the element's contents and
retrieve the script via the URI.