# Using MathJax

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}\\]';
}]);
```