Adding Mathjax to a Joomla website

Question

I would like to add MathJax functionality to my website but I have no idea how to go about doing so.

Does this require using a specific template or modifying an existing one? (I'm currently using AllRounder if the answer is template specific.)
Do I need to use a different editor? (I'm currently using JCE Editor)?

Presently, the website content management is done exclusively by me on the administrative side, although I don't know if that matters. (Perhaps there is a situation where a website would want to restrict MathJax use to certain privileged users?)

csbenjamin · Accepted Answer · 2014-04-27 15:53:40Z

All you need is a plugin. You can write a content plugin adding a onContentPrepare method:

    public function onContentPrepare(\(context, &\)article, &\(params, \)page = 0)
    {   
            \(doc = JFactory::getDocument();
            \)doc->addScript("http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML");
    }

or you can use the jexbox plugin.

Edit:

As @Anibal answer, you can edit the template file. I'm improving the @Anibal answer to support your code \(\frac{a}{b}\)

...
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {inlineMath: [['\(','\)'], ['\\(','\\)']]}
        });
    </script>
    <script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

</head>
<body id="shadow">
....

You're assuming more Joomla knowledge than I have :-). I have no idea how one writes a content plugin. Where should I be putting the code you provided? — bobthechemist, Apr 27 '14 at 15:22
@bobthechemist If it solved your problem, accept this answer, thus you help the site :) — csbenjamin, Apr 29 '14 at 0:42

Anibal · Accepted Answer · 2014-04-27 13:38:19Z

There are several ways:

A. At template level: Access your template, and add the Mathjax cdn line in the head area. E.g. In beez3 template:

templates/beez3/index.php, line 85

...
    <script type="text/javascript"
      src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

    </head>
    <body id="shadow">
....

B. With a Custom HTML module: You can add a couple of PHP source code lines in a custom scripting module. In this way you can assign the Mathjax cdn script to specific menus. For example, with NoNumber Sourcerer http://www.nonumber.nl/extensions/sourcerer

{source}
<?php

    \(doc = JFactory::getDocument();
    \)doc->addScript('http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML', 'text/javascript');

?>
{/source}

I must be missing something here. I've tried editing the beez template (I have beez5) and added the script lines in your first example into the head section of index.php. When I write an article with \(\frac{a}{b}\) in it, the MathJax doesn't get interpreted; it shows up just like it does in the comment here. — bobthechemist, Apr 27 '14 at 15:20
I'm no expert in MathJax. But if the MathJax.js file is pulled from server and loaded with no error (check it with Firebug or any inspection tool), it should process the extende syntaxis. Also, verify if the Html Editor is adding the text with no further formatting. — Anibal, May 2 '14 at 14:47

MattAllegro · Accepted Answer · 2021-04-21 08:53:40Z

I have copied and pasted

<script type="application/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

just before </head> tag in the PHP template principal page file.

Then, it was enough for me to use MathJaX delimiters inside articles.

It just works, and in the usual nice way.

Answer edited after some changes occurred in 2014/15.

Ά΄λυκείου