Using MathJax: Difference between revisions
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 6: | Line 6: | ||
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.'' | ''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.'' | ||
The | The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.net/ Agentyikes]. Thank you very much for doing this great work. | ||
Meanwhile, JSXGRapah has full support of MathJax: | |||
<jsxgraph> | <jsxgraph> | ||
var brd, k; | var brd, k; | ||
JXG.Options.text.useMathJax = true; | |||
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true}); | brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true}); | ||
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1}); | k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1}); | ||
Line 14: | Line 17: | ||
brd.create('text',[-4,15, | brd.create('text',[-4,15, | ||
function() { | function() { | ||
return '\\[f(x) = e^{' + k.Value() + 'x}\\]'; | |||
}]); | }]); | ||
</jsxgraph> | </jsxgraph> | ||
Line 32: | Line 27: | ||
</source> | </source> | ||
To | The second step is to enable MathJax rendering in the JSXGraph options: | ||
<source lang="javascript"> | |||
JXG.Options.text.useMathJax = true; | |||
</source> | |||
<source lang="javascript"> | |||
</source> | |||
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax. | |||
<source lang="javascript"> | |||
brd.create('text',[-4,15, | |||
function() { | |||
return '\\[f(x) = e^{' + k.Value() + 'x}\\]'; | |||
}]); | |||
</source> | |||
The complete program code looks like this: | |||
<source lang="javascript"> | <source lang="javascript"> | ||
var brd, k; | var brd, k; | ||
JXG.Options.text.useMathJax = true; | |||
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true}); | brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true}); | ||
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1}); | k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1}); | ||
Line 45: | Line 51: | ||
brd.create('text',[-4,15, | brd.create('text',[-4,15, | ||
function() { | function() { | ||
return '\\[f(x) = e^{' + k.Value() + 'x}\\]'; | |||
}]); | }]); | ||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] |
Revision as of 17:15, 27 September 2010
This example uses MathJax to render mathematical text.
MathJax is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by Carol Fisher and Agentyikes. Thank you very much for doing this great work.
Meanwhile, JSXGRapah has full support of MathJax:
The underlying JavaScript code
The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):
<script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>
The second step is to enable MathJax rendering in the JSXGraph options:
JXG.Options.text.useMathJax = true;
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.
brd.create('text',[-4,15,
function() {
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
}]);
The complete program code looks like this:
var brd, k;
JXG.Options.text.useMathJax = true;
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});
brd.create('functiongraph', [function(t) {return brd.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
brd.create('text',[-4,15,
function() {
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
}]);