dynamic rendering of mathml
317 views
Skip to first unread message
Iswarya Rajagopal
Feb 27, 2012, 3:11:18 AM2/27/12
to MathJax Users
Hi,
i'm new to using mathjax and mathml. Can anyone please send me a
sample code for rendering dynamic mathml?
The below code works with firefox but throws an error with chrome
saying "Uncaught SyntaxError: Unexpected token < "
CODE:
<html>
<head>
<title>Interactive MathML display</title>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?
config=MML_HTMLorMML-full">
MathJax.Hub.Config({
extensions: ["mml2jax.js"],
MMLorHTML: { prefer: "HTML" } ,
jax: ["input/MathML", "output/HTML-CSS"]
});
</script>
</head>
<body>
<script>
(function () {
var QUEUE = MathJax.Hub.queue;
var math = null;
QUEUE.Push(function () {
math = MathJax.Hub.getAllJax("MathOutput")[0];
});
window.ShowMath = function (MathML) {
QUEUE.Push(["Text",math,MathML]);
}
})();
</script>
<input type="button" onclick="ShowMath(<math>
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>)" value="Show" id="MathInput" />
<p>
<div id="MathOutput">
Formula: <math></math>
</div>
</body>
</html>
Please correct my code or send a new sample code.
I am given a project which is render a formula suggestion feature
whihc will suggest math formula. So i shud find a way of remembering
formula and rendering them dynamicaaly on the fly. Kindly suggest
ideas.
Please help me immediately. i have been stuck for the lst 2 weeks
Thanks.
Iswarya
i'm new to using mathjax and mathml. Can anyone please send me a
sample code for rendering dynamic mathml?
The below code works with firefox but throws an error with chrome
saying "Uncaught SyntaxError: Unexpected token < "
CODE:
<html>
<head>
<title>Interactive MathML display</title>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?
config=MML_HTMLorMML-full">
MathJax.Hub.Config({
extensions: ["mml2jax.js"],
MMLorHTML: { prefer: "HTML" } ,
jax: ["input/MathML", "output/HTML-CSS"]
});
</script>
</head>
<body>
<script>
(function () {
var QUEUE = MathJax.Hub.queue;
var math = null;
QUEUE.Push(function () {
math = MathJax.Hub.getAllJax("MathOutput")[0];
});
window.ShowMath = function (MathML) {
QUEUE.Push(["Text",math,MathML]);
}
})();
</script>
<input type="button" onclick="ShowMath(<math>
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>)" value="Show" id="MathInput" />
<p>
<div id="MathOutput">
Formula: <math></math>
</div>
</body>
</html>
Please correct my code or send a new sample code.
I am given a project which is render a formula suggestion feature
whihc will suggest math formula. So i shud find a way of remembering
formula and rendering them dynamicaaly on the fly. Kindly suggest
ideas.
Please help me immediately. i have been stuck for the lst 2 weeks
Thanks.
Iswarya
leathrum
Feb 27, 2012, 10:34:32 AM2/27/12
to MathJax Users
The syntax error is coming from the parameter to the ShowMath() method
in your onclick attribute -- I'm a bit surprised that Firefox was so
forgiving about this, but it managed to find a way to parse it. You
need to single-quote the <math>...</math> block so that JavaScript
recognizes it as a string being passed into the ShowMath() method.
There is a problem, though: single-quoted strings aren't supposed to
include line breaks, so you will need to escape all of your line
breaks. So your <input> tag should look like this:
<input type="button" onclick="ShowMath('<math>\
<mi>x</mi> <mo>=</mo>\
<mrow>\
<mfrac>\
<mrow>\
<mo>−</mo>\
<mi>b</mi>\
<mo>±</mo>\
<msqrt>\
<msup><mi>b</mi><mn>2</mn></msup>\
<mo>−</mo>\
<mn>4</mn><mi>a</mi><mi>c</mi>\
</msqrt>\
</mrow>\
<mrow> <mn>2</mn><mi>a</mi> </mrow>\
</mfrac>\
</mrow>\
<mtext>.</mtext>\
</math>')" value="Show" id="MathInput" />
Other than that, your code appears to be functional. As long as you
are careful about quotes and line breaks, there is no reason why you
shouldn't be able to store that MathML string in a JavaScript
variable, then later assign it to the innerHTML of a div or span, then
push the MathJax Typeset method onto the queue to process it. But
your approach with the Text call works for this purpose, too.
in your onclick attribute -- I'm a bit surprised that Firefox was so
forgiving about this, but it managed to find a way to parse it. You
need to single-quote the <math>...</math> block so that JavaScript
recognizes it as a string being passed into the ShowMath() method.
There is a problem, though: single-quoted strings aren't supposed to
include line breaks, so you will need to escape all of your line
breaks. So your <input> tag should look like this:
<input type="button" onclick="ShowMath('<math>\
<mi>x</mi> <mo>=</mo>\
<mrow>\
<mfrac>\
<mrow>\
<mo>−</mo>\
<mi>b</mi>\
<mo>±</mo>\
<msqrt>\
<msup><mi>b</mi><mn>2</mn></msup>\
<mo>−</mo>\
<mn>4</mn><mi>a</mi><mi>c</mi>\
</msqrt>\
</mrow>\
<mrow> <mn>2</mn><mi>a</mi> </mrow>\
</mfrac>\
</mrow>\
<mtext>.</mtext>\
</math>')" value="Show" id="MathInput" />
are careful about quotes and line breaks, there is no reason why you
shouldn't be able to store that MathML string in a JavaScript
variable, then later assign it to the innerHTML of a div or span, then
push the MathJax Typeset method onto the queue to process it. But
your approach with the Text call works for this purpose, too.
Iswarya Rajagopal
Feb 27, 2012, 7:34:42 PM2/27/12
to mathja...@googlegroups.com
Hi leathrum,
Thank u so much.. I got it working..
Now is there any wrapper that is written for MathJax? I need a wrapper written in c#. I am pretty new to all this. Kindy someone show some light.
Thanks.
leathrum
Feb 28, 2012, 11:47:39 AM2/28/12
to MathJax Users
I'm not very familiar with C#, but I can say that MathJax is designed
to work within the context of a browser, so if you are looking for a
way to use MathJax in a stand-alone application compiled from C#, then
you are going to need to look for a way to render HTML with JavaScript
inside your application. I did a bit of poking around, and it may be
that the C# WebBrowser control object will do what you need. Try
loading an HTML page with MathJax content into a WebBrowser instance
displayed in an application and see what happens -- I'll be interested
in hearing the results, so please report back.
On Feb 27, 6:34 pm, Iswarya Rajagopal <ishu...@gmail.com> wrote:
> Hi leathrum,
>
> Thank u so much.. I got it working..
> Now is there any *wrapper* that is written for MathJax? I need a wrapper
to work within the context of a browser, so if you are looking for a
way to use MathJax in a stand-alone application compiled from C#, then
you are going to need to look for a way to render HTML with JavaScript
inside your application. I did a bit of poking around, and it may be
that the C# WebBrowser control object will do what you need. Try
loading an HTML page with MathJax content into a WebBrowser instance
displayed in an application and see what happens -- I'll be interested
in hearing the results, so please report back.
On Feb 27, 6:34 pm, Iswarya Rajagopal <ishu...@gmail.com> wrote:
> Hi leathrum,
>
> Thank u so much.. I got it working..
Reply all
Reply to author
Forward
0 new messages