Using MathJax - Revision history

A WASSERMANN at 11:54, 3 November 2025

2025-11-03T11:54:48Z

← Older revision		Revision as of 11:54, 3 November 2025
Line 1:		Line 1:
	This example uses MathJax to render mathematical text like		This example uses MathJax to render mathematical text like
	$\int x^2 dx$.		$\int x^2 dx$.

	~~<math>\int x^2 dx.</math>~~

	''[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.''
Line 13:		Line 11:

	<jsxgraph>		<jsxgraph>
	var ~~brd~~, k;		var board, k;
	JXG.Options.text.useMathJax = true;		JXG.Options.text.useMathJax = true;
	~~brd~~ = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});		board = 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 = board.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'});		board.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
	~~brd~~.create('text',[-4,7,		board.create('text',[-4,7,
	() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'		() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'
	], {fontSize:24});		], {fontSize:24});
Line 33:		Line 31:

	<source lang="php">		<source lang="php">
	$~~SmjDisplayMath~~ = [[ "\\[", "\\]" ] ];		$wgSmjDisplayMath = [ [ "$$", "$$"], ["\[", "\]"] ];
	$~~SmjExtraInlineMath~~ = [[ "\$", "\$" ] ];		$wgSmjExtraInlineMath = [[ "$", "$"] ];
	</source>		</source>

Line 51:		Line 49:
	The complete program code looks like this:		The complete program code looks like this:
	<source lang="javascript">		<source lang="javascript">
	var ~~brd~~, k;		var board, k;
	JXG.Options.text.useMathJax = true;		JXG.Options.text.useMathJax = true;
	~~brd~~ = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});		board = 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 = board.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'});		board.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
	~~brd~~.create('text',[-4,15,		board.create('text',[-4,15,
	() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'		() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'
	]);		]);

A WASSERMANN at 11:51, 3 November 2025

2025-11-03T11:51:45Z

← Older revision		Revision as of 11:51, 3 November 2025
Line 44:		Line 44:
	To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.		To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.
	<source lang="javascript">		<source lang="javascript">
	~~brd~~.create('text',[-4,15,		board.create('text',[-4,15,
	() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'		() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'
	], {fontSize:24});		], {fontSize:24});

A WASSERMANN at 11:43, 3 November 2025

2025-11-03T11:43:10Z

← Older revision		Revision as of 11:43, 3 November 2025
Line 1:		Line 1:
	This example uses MathJax to render mathematical text like		This example uses MathJax to render mathematical text like
	$\int x^2 dx$.		$\int x^2 dx$.

			<math>\int x^2 dx.</math>

	''[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.''

A WASSERMANN at 11:39, 3 November 2025

2025-11-03T11:39:23Z

← Older revision		Revision as of 11:39, 3 November 2025
Line 1:		Line 1:
	This example uses MathJax to render mathematical text like		This example uses MathJax to render mathematical text like
	$\int x^2 dx$.		$\int x^2 dx$.

	~~$$\int x^2 dx.$$~~

	''[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.''

A WASSERMANN at 11:39, 3 November 2025

2025-11-03T11:39:06Z

← Older revision		Revision as of 11:39, 3 November 2025
Line 1:		Line 1:
	This example uses MathJax to render mathematical text like		This example uses MathJax to render mathematical text like
	$\int x^2 dx$.		$\int x^2 dx$.

			$$\int x^2 dx.$$

	''[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.''

A WASSERMANN at 20:41, 2 November 2025

2025-11-02T20:41:29Z

← Older revision		Revision as of 20:41, 2 November 2025
Line 1:		Line 1:
	This example uses MathJax to render mathematical text like		This example uses MathJax to render mathematical text like
	\$\int x^2 dx\$.		$\int x^2 dx$.

	''[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.''

A WASSERMANN at 20:41, 2 November 2025

2025-11-02T20:41:11Z

← Older revision		Revision as of 20:41, 2 November 2025
Line 1:		Line 1:
	This example uses MathJax to render mathematical text like		This example uses MathJax to render mathematical text like
	$\int x^2 dx$.		\$\int x^2 dx\$.

	''[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.''

A WASSERMANN at 20:39, 2 November 2025

2025-11-02T20:39:47Z

← Older revision		Revision as of 20:39, 2 November 2025
Line 32:		Line 32:
	<source lang="php">		<source lang="php">
	$SmjDisplayMath = [[ "\\[", "\\]" ] ];		$SmjDisplayMath = [[ "\\[", "\\]" ] ];
	$SmjExtraInlineMath = [[ "\$", "\$" ] ]		$SmjExtraInlineMath = [[ "\$", "\$" ] ];
	</source>		</source>

A WASSERMANN at 20:21, 2 November 2025

2025-11-02T20:21:03Z

← Older revision		Revision as of 20:21, 2 November 2025
Line 17:		Line 17:
	brd.create('functiongraph', [function(t) {return JXG.Math.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,7,		brd.create('text',[-4,7,
	() => '\\[f(x) = e^{' + k.Value() + 'x}\\]		() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'
	], {fontSize:24});		], {fontSize:24});
	</jsxgraph>		</jsxgraph>

A WASSERMANN at 20:20, 2 November 2025

2025-11-02T20:20:31Z

← Older revision		Revision as of 20:20, 2 November 2025
Line 8:		Line 8:
	Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.		Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.
	<html>		<html>
	~~<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>~~
	</html>		</html>

Line 18:		Line 17:
	brd.create('functiongraph', [function(t) {return JXG.Math.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,7,		brd.create('text',[-4,7,
	~~function~~() {		() => '\\[f(x) = e^{' + k.Value() + 'x}\\]
	~~return~~ '\\[f(x) = e^{' + k.Value() + 'x}\\]';		], {fontSize:24});
	}], {fontSize:24});
	</jsxgraph>		</jsxgraph>

Line 28:		Line 26:
	<source lang="xml">		<source lang="xml">
	<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>		<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>
	~~</script>~~
	</source>		</source>
	In mediawiki, it is sufficient to load the extension "SimpleMathJax" and configure it by setting		In mediawiki, it is sufficient to load the extension "SimpleMathJax" and configure it by setting
Line 46:		Line 43:
	<source lang="javascript">		<source lang="javascript">
	brd.create('text',[-4,15,		brd.create('text',[-4,15,
	~~function~~() {		() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'
	~~return~~ '\\[f(x) = e^{' + k.Value() + 'x}\\]';		], {fontSize:24});
	}], {fontSize:24});
	</source>		</source>

Line 59:		Line 55:
	brd.create('functiongraph', [function(t) {return JXG.Math.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,15,
	~~function~~() {		() => '\\[f(x) = e^{' + k.Value() + 'x}\\]'
	~~return~~ '\\[f(x) = e^{' + k.Value() + 'x}\\]';		]);
	}]);
	</source>		</source>

	[[Category:Examples]]		[[Category:Examples]]
	[[Category:Text]]		[[Category:Text]]