6

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?)

6

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 Take a look in my edit above – csbenjamin Apr 27 '14 at 15:54
  • Your edit did the trick. – bobthechemist Apr 29 '14 at 0:23
  • @bobthechemist If it solved your problem, accept this answer, thus you help the site :) – csbenjamin Apr 29 '14 at 0:42
4

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
3

I have copied and pasted

<script type="application/javascript" src="https://c328740.ssl.cf1.rackcdn.com/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.

Addendum: I did not notice before today that, since the latest months, some changes occurred and must be considered by users who want to choose this simple way of implementation.

Switching https://c328740.ssl.cf1.rackcdn.com/ to https://cdn.mathjax.org/ in the link above would - I verified - keep this answer actual.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.