Using MathJax: Difference between revisions

From JSXGraph Wiki
No edit summary
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 solution how to use MathJax in texts inside of a JSXGraph construction has 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.
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() {  
     var txt;
     return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
    if (k.Value() == 1) {
      txt = '<div id="mathjax_div">'+'\\[f(x) = e^x \\]'+'</div>';
    } else {
      txt = '<div id="mathjax_div">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
    }
    return txt;
   }]);
   }]);
brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('mathjax_div'); return '';}]);
brd.update();
</jsxgraph>
</jsxgraph>


Line 32: Line 27:
</source>
</source>


To enable MathJax inside of JSXGraph, the function that is linked to (dynamic) text which will be rendered by MathJax  
The second step is to enable MathJax rendering in the JSXGraph options:
returns HTML code containing a div-tag together with an ID. Here, this ID is ''mathjax_div''. In our example this text element is displayed at position (-4,15).
<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>


Then, we need a second, invisible text put to (-3,15). The function connected to this second text calls the MathJaX function
The complete program code looks like this:
''MathJax.Hub.Typeset('mathjax_div');'', whenever the board is updated.
Thus, the text in the division ''mathjax_div'' is rendered again by MathJax.
<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() {  
     var txt;
     return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
    if (k.Value() == 1) {
      txt = '<div id="mathjax_div">'+'\\[f(x) = e^x \\]'+'</div>';
    } else {
      txt = '<div id="mathjax_div">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
    }
    return txt;
   }]);
   }]);
brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('mathjax_div'); return '';}]);
brd.update();
</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}\\]';
  }]);