View source for Formatter: MathJax

#||
||
Compatible with: !!(green)**R6.1**!!
Current version: 0.2
Credits: ((user:WikiAdmin WikiAdmin))
|{{toc numerate=1}} ||
||#

##""%%(math) ... %%""##

MathJax allows you to include mathematics in your web pages, either using TeX and LaTeX notation, or as MathML, and you can even use both in the same document.

https://www.mathjax.org

===Install===
The MathJax script should be loaded once either dynamically via action or the theme header and the math syntax should be parsed once via the math formatter, mainly to avoid being parsed and modified by the Wiki formatter.

====Formatter====
**~/formatter/highlight/math.php**
``(php)
<?php

/*
	%%(math)
	content
	%%

	requires MathJax script <https://github.com/mathjax/MathJax>
	The MathJax script must be loaded once either via the {{math}} action or the theme header.
*/

// set math action call once
if (!isset($this->mathjax))
{
	$this->mathjax = true;

	echo
		'<ignore><!--notypo--><!--action:begin-->' .
			'math' .
		'<!--action:end--><!--/notypo--></ignore>';
}

echo	'<ignore><!--notypo-->' . "\n" .
			Ut::html($text) .
		'<!--/notypo--></ignore>' . "\n";


``

====Action====
The MathJax script **must be loaded once** either dynamically via 
  * the ##~{{math}}## action (formatter sets action call) **or** 
  * the theme header.

Modify the extensive ((https://docs.mathjax.org/en/latest/options/index.html MathJax settings)) for your requirements.

**~/action/math.php**
%%(php)
<?php

if (!defined('IN_WACKO'))
{
	exit;
}

// default settings for MathJax
$script = <<<EOD
MathJax = {
{ 
	options: {
		enableMenu: false
	}, 
	tex: {
		inlineMath: [ ["$","$"], ["\\\\(","\\\\)"] ],
		displayMath: [ ["$$","$$"], ["\\\\[","\\\\]"] ],
		processEscapes: true
	},
	svg: {
		fontCache: "global"
	}
};
EOD;

$mathjax = $this->db->base_path . 'js/mathjax/tex-svg.js';					// local
#$mathjax = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';	// CDN

$this->add_html('footer', '<script src="' . $mathjax . '" defer></script>');
$this->add_html('footer', '<script>' . $script . '</script>');
%%


====Hosting your own copy of the MathJax Components====

https://github.com/mathjax/MathJax
Copy the files from the MathJax Components to the ##js/mathjax/## folder on your server.

##es5/## --> ##js/mathjax/##

%%
git clone https://github.com/mathjax/MathJax.git mj-tmp
mv mj-tmp/es5 <path-to-server-location>/js/mathjax
rm -rf mj-tmp
%% 

===Configuration===

====Router====
Add the ##js/mathjax## directory and all sub-folders to your ##router.conf## if you hosting your own copy of the MathJax Components.

js/mathjax/ folders
%%
a11y/
adaptors/
input/
input/mml/
input/mml/extensions/
input/tex/extensions/
output/
output/chtml/fonts/
output/chtml/fonts/woff-v2/
output/svg/fonts/
sre/mathmaps/
ui/
%% 

config/router.conf
%%(hl diff)
diff --git a/src/config/router.conf b/src/config/router.conf
index 6649fc2..0d645b9 100644
--- a/src/config/router.conf
+++ b/src/config/router.conf
@@ -108,6 +108,7 @@
 `^image/(wikiedit/)?{}$`									_ok!			// icons
 `^theme/{}/icon/{}$`										_ok!			// icons
 `^js/(lang/|photoswipe/)?{}$`								_ok!			// js
+`^js/mathjax/(([0-9a-z-]*/){0,4}){}$`						_ok!			// js
 `^file/(global/){}$`										_ok!			// global uploads
 `^file/thumb/{}$`											_ok!			// global thumbs
 `^setup/(image|css)/{}$`									_ok! unlock=1	// setup inlines
%%

====CSP====
Add the domain of the CDN to ##font-src## and ##script-src## in your ##csp.custom.conf## if you do use a MathJax CDN server.

config/csp.custom.conf
%%
	font-src 'self' cdn.jsdelivr.net;
	script-src 'self' 'unsafe-inline' cdn.jsdelivr.net;
%% 

===How to===
Initialize MathJax once via the ##~{{math}}## action.

##""%%(math)
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
%%""##

%%(math)
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
%%

-> **((!/Examples more examples))**

===Changelog===
0.1	Intitial version
0.2  math action is set via formatter

===To Do===
  * test formatter and settings
  * improve code and documentation

{{backlinks}}