Difference between revisions of "Using MathJax"

From JSXGraph Wiki
Jump to: navigation, search
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 18: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}\\]';
  }]);