H5p content, How to use mathjax.js for equation?

We're planning to add a mathjax library in the future, but we're not there quite yet. The comment above is a bit outdated.

Try this in a module:

<?php

/**
 * @file
 *  h5pmathjax.module php file
 *  Drupal module h5pmathjax. 
 */

/**
 * Implementation of hook_h5p_semantics_alter().
 *
 * Adds mathml tags to wysiwyg fields.
 */
function h5pmathjax_h5p_semantics_alter(&$semantics) {
  foreach ($semantics as $field) {
    // Lists specify the field inside the list.
    while ($field->type === 'list') {
      $field = $field->field;
    }

    if ($field->type === 'group') {
      h5pmathjax_h5p_semantics_alter($field->fields);
    }
    else if ($field->type === 'text' && isset($field->widget) && $field->widget === 'html') {
      if (!isset($field->tags)) {
        $field->tags = array();
      }

      // Add MathML tags
      $field->tags = array_merge($field->tags, array(
        'span',
        'math',
        'maction',
        'maligngroup',
        'malignmark',
        'menclose',
        'merror',
        'mfenced',
        'mfrac',
        'mglyph',
        'mi',
        'mlabeledtr',
        'mlongdiv',
        'mmultiscripts',
        'mn',
        'mo',
        'mover',
        'mpadded',
        'mphantom',
        'mroot',
        'mrow',
        'ms',
        'mscarries',
        'mscarry',
        'msgroup',
        'msline',
        'mspace',
        'msqrt',
        'msrow',
        'mstack',
        'mstyle',
        'msub',
        'msup',
        'msubsup',
        'mtable',
        'mtd',
        'mtext',
        'mtr',
        'munder',
        'munderover',
        'semantics',
        'annotation',
        'annotation-xml',
      ));
    }
  }
}

/**
 * Implements hook_h5p_scripts_alter().
 *
 * Adds MathJax support.
 */
function h5pmathjax_h5p_scripts_alter(&$scripts, &$libraries, &$embed_type) {
  $scripts[] = (object) array(
    'path' => 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML',
    'version' => ''
  );
  $scripts[] = (object) array(
    'path' => drupal_get_path('module', 'h5pmathjax') . '/mathjax.js',
    'version' => '?ver=0.0.1'
  );
}

And mathjax.js:

(function ($) {
  if (MathJax === undefined) {
    return; // Missing MathJax
  }

  // Hide annoying processing messages
  MathJax.Hub.Config({messageStyle: 'none'});

  $(document).ready(function () {
    // Find H5P content
    $('.h5p-content').each(function (i, e) {
      var doJax = function (node) {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub, node]);
      };
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
      if (!MutationObserver) {
        var check = function () {
          $('math', e).each(function (j, m) {
            doJax(m.parentNode);
          });
          checkInterval = setTimeout(check, 2000);
        };
        var checkInterval = setTimeout(check, 2000);
      }
      else {
        var running = false;
          var limitedResize = function () {
            if (!running) {
              running = setTimeout(function () {
                $('math', e).each(function (j, m) {
                  doJax(m.parentNode);
                });
                running = null;
              }, 500); // 2 fps cap
            }
          };

        var observer = new MutationObserver(function (mutations) {
          for (var i = 0; i < mutations.length; i++) {
            if (mutations[i].addedNodes.length) {
              limitedResize();
              return;
            }
          }
        });
        observer.observe(e, {
          childList: true,
          subtree: true
        });
      }
    });
  });
})(H5P.jQuery);

Thank you. That does sound a bit too advanced for now so I'll work around it by saving the equations as pictures until someone else makes a plugin...

I'm on a low budget I'm afraid, making my website as a non-profit. It's amazing that H5P is free even though it's a fantastic plugin :) I'm so glad I finally found a plugin to make great-looking courses without any coding so I can focus on the content.

Hi, I have made a custom plugin and I am wondering if you could help me on the next steps on how to make mathjax work through it? Thanks

I have tried to install this mathjax support for h5p, but with no success.

I have created a module by placing a folder in \sites\all\modules\h5pmathjax\h5pmathjax.module as listed in the code section above. I added h5pmathjax.info and mathjax.js (as listed in the code section above) to this folder.

I enabled the module, successfully I believe as I added a function h5pmathjax_help which is being recognised). When I try to use a mathjax string it remains as a string. By looking in developer tools in CHrome, I can see that the mathjax.js file for the mathjax module has been loaded, but this one does not appear. What am I missing?

Experience level: php/js reasonable; Drupal/Opigno very new. Thanks for your consideration. 

Correction (Ihad some debugging code in). The lines 

Its looking for (and not finding):

• /jax/input/Tex/config.js
• /jax/output/HTML-CSS/config.js
• /extensions/tex2jax.js
• /extensions/MathZoom.js
• /extensions/MathMenu.js

are incorrect. IT is only looking for:

• /extensions/MathZoom.js
• /extensions/MathMenu.js

Sorry. No other error messages are being produced. So it looks like a case for some more debugging statements!

Hm, let's try to focus on the editor first. We need to get the formulas in before we worry about the view.
Try to uncomment the h5pmathjax_h5p_scripts_alter function and see if anything changes. There might be some trouble since the plugin is trying to load MathJax as well.