Difference between revisions of "Using MathJax"

From JSXGraph Wiki
Jump to: navigation, search
 
(15 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
   <script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>
 
   <script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>
 
</html>
 
</html>
This example uses MathJax to render mathematical. "[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."
+
This example uses MathJax to render mathematical text.  
 +
 
 +
''[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 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.org/ Agentyikes]. Thank you very much for doing this great work.
 +
 
 +
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.
 
<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});
brd.create('functiongraph', [function(t) {return brd.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
+
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
brd.create('text',[-4,15,
+
brd.create('text',[-4,7,
 
   function() {  
 
   function() {  
     var temp;
+
     return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
    if (k.Value() == 1) {
+
   }], {fontSize:24});
      temp = '<div id="function">'+'\\[f(x) = e^x \\]'+'</div>';
 
    } else {
 
      temp = '<div id="function">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
 
    }
 
    return temp;
 
   }], {fontSize:60});
 
  brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('function'); return '';}]);
 
  brd.update();
 
 
</jsxgraph>
 
</jsxgraph>
  
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
 +
The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):
 
<source lang="xml">
 
<source lang="xml">
 +
  <script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>
 
</source>
 
</source>
  
 +
The second step is to enable MathJax rendering in the JSXGraph options:
 
<source lang="javascript">
 
<source lang="javascript">
 +
JXG.Options.text.useMathJax = true;
 +
</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}\\]';
 +
  }], {fontSize:24});
 +
</source>
 +
 +
The complete program code looks like this:
 +
<source lang="javascript">
 +
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 JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
 +
brd.create('text',[-4,15,
 +
  function() {
 +
    return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
 +
  }]);
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Text]]

Latest revision as of 17:16, 20 February 2013

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, JSXGraph contains full support of MathJax. Here is an example how to enable dynamic MathJax syntax inside of JSXGraph.

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}\\]';
  }], {fontSize:24});

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 JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
brd.create('text',[-4,15,
  function() { 
    return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
  }]);