How to add Accessible Mathematics to your rise course. (Including Super and Sub Scripts and Formulas)

Aug 01, 2017

Edit 1: Updated with JS to check for dynamically created content.

Edit 2: Updated with /content/lib/main.bundle.js script injection needed for continue buttons and other dynamic content.


Here are the steps to follow for creating accessible Math in rise:

  1. Use the following site to create your math latex formula: and to confirm the equation displays the way you want. An example of a formula might be x^{2} = \frac{2}{y} which is “x² = 2 / y”
  2. Copy your latex formula into Rise where you want it, but add “$$” before and after, so: $$x^{2} = \frac{2}{y}$$
  3. Do this for all equations until you publish.
  4. After publishing, extract the zip file and open index.html
  5.  After the <head> tag, insert the following Javascript:

<script src=""></script>

<script src=''></script>

<script type="text/javascript">
// Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
mutationRecordsList.forEach(function(mutationRecord) {
if ("attributes" === mutationRecord.type) {

// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

// the target to watch, this could be #yourUniqueDiv
// we use the body to watch for changes
var targetObject = document.body;

// Register the target node to observe and specify which DOM changes to watch

observerObject.observe(targetObject, {
attributes: true,
attributeFilter: ["id", "dir"],
attributeOldValue: true,
childList: true

6. Finally, in /content/lib/main.bundle.js search for the following code:

                      return e.createElement("div", null, this.props.children)

and add the following right before it:



55 Replies
D Price
Zachary Daily

Here's the code for MathJax version 3.  You can put this in the head section of the index.html page and don't have to worry about messing with the bundle.js file.

 Edit: updated 5/19/20 after scripts started breaking - This is the risk of users having to implement workarounds to get this functionality.  Articulate stores the lesson content in JSON which is BASE64 encoded and stored in a variable on the index.html page.  It must decode and parse the JSON and dynamically load the content to the page after the page is loaded.  It would be great if Articulate could provide us with an event we could hook into when the content is finished loading to the page.  At that point we could simply call MathJax.typeset(); or MathJax.typesetPromise(); instead of haphazardly trying to detect DOM changes which is VERY inefficient.

var mathJaxPromise = null;
MathJax = {
  tex: {
    inlineMath: [['\\(', '\\)']]

  startup: {
    ready: () => {
      MathJax.startup.defaultReady(); // Make sure MathJax is initialized
      // Whenever there's a DOM change, check the dynamic content for LaTex
      var observer = new MutationObserver(function () {
        if (mathJaxPromise) {
          mathJaxPromise.then(function () {
            mathJaxPromise = MathJax.typesetPromise();
        else {
          mathJaxPromise = MathJax.typesetPromise();

      observer.observe(document.body, {
        attributes: true,
        attributeFilter: ["id", "dir"],
        attributeOldValue: true,
        childList: true

function typeset() {
  MathJax.startup.promise = MathJax.startup.promise
    .then(() => MathJax.typesetPromise())
    .catch((err) => console.log('Typeset failed: ' + err.message));
  return MathJax.startup.promise;
// Check for changes in the hash location in the address bar
addEventListener("hashchange", (event) => {

<script src=""></script>
<!-- Uncomment one of the scripts below to use either chtml or svg. I defaulted to SVG for widest support -->
<!-- svg (use scalable images) -->
<script id="MathJax-script" async src=""></script>
<!-- chtml (use html/fonts and css (beware of EDGE) -->
<!-- <script id="MathJax-script" async src=""></script> -->

Edit: 1/29/2024 - Updated to account for breaking changes.  This now detects changes in the # location in the address bar to reapply mathjax.

Thank you so much for the update Zachary, it is very much appreciated!

Jason LaMar


To help make this a bit more "consistent" (such as it is), I changed line 5 of Zachary's code to this instead:

inlineMath: [['$$$', '$$$']]

That way, if you use $$ on either side of the MathML code, it outputs the math on its own line. But if you just add one more dollar sign and use $$$ on either side of the MathML, it outputs the math inline.

It's a small detail, of course, but for me (and my instructional designer colleagues) it's easier to remember multiple dollar signs -- as long as you don't get mixed up on which one displays inline versus on its own line. :-)

Lisa van der Westhuizen

Hi all,

Thanks to John and Zachary for the code.  I am not js proficient at all, just a bit of HTML and CSS.  I have followed the instructions to the T as the module I am developing uses mostly inline math equations.  However, after doing a test publish with the revised index.html file, my equations only render on the first page, there after it shows the equations in their code format e.g., $$$0=0$$$, but as soon as I try to copy an equation over to Word to test to see if it is fonts causing the trouble, the whole page suddenly displays correctly?! What am I doing wrong?  I've tested this in three different browsers: FireFox (my default), Chrome and Edge, they all display it incorrectly at first until you highlight an equation and press CTL + C then is fixes the display.