%%(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

1. 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.

1.1. Formatter

/formatter/highlight/math.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";
	

1.2. 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 MathJax settings for your requirements.

/action/math.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>');
	

1.3. 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	

2. Configuration

2.1. 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

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

2.2. 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;	

3. 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}.\]
%%

-> more examples

4. Changelog

0.1 Intitial version
0.2 math action is set via formatter

5. To Do

• test formatter and settings
• improve code and documentation