MathJax numbered equation preview on Jekyll

_README.md

MathJax numbered equation preview

No need to click on an a tag to see the equation, just hover on any <a> tag created using \eqref{label} and that's it!

Contents:

• index.html (the configuration I use for MathJax which enables equation numbers, see http://cdn.mathjax.org/mathjax/latest/test/sample-eqnum.html for more examples)
• mathjaxPreview.js the scripts which enables the preview

index.html

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    showProcessingMessages: false,
    messageStyle: 'none',
    tex2jax: {
      inlineMath: [['$','$']],
      displayMath: [['$$','$$']],
      processEnvironments: false
    },
    // show equation numbers
    TeX: {
      equationNumbers: {
        autoNumber: "AMS"
      }
    },
    'HTML-CSS': {
      imageFont: null
    }
  });
</script>

mathjax-equation-numbering.gif

mathjaxPreview.css

.mathjax-tooltip {
  display: none;
  width: 100%;
  position: absolute;
}

mathjaxPreview.js

/*
 * MathJax eqn preview for a tags
 *
 * Copyright (c) 2015 Mauricio Poppe
 * Licensed under the MIT license.
 */
(function () {
  var $container = $(document.body);
  var $tooltip = $('<div />').addClass('mathjax-tooltip');
  $container.append($tooltip);

  function onMouseOver(ev) {
    var a = ev.currentTarget;
    var $number = $(a.hash);
    var $root = $number.closest('.MathJax_Display');
    var bounds = $(a).offset();
    var containerBounds = $container.offset();

    $tooltip.stop(true, true);
    $tooltip.append($root.clone());
    $tooltip.css({
      top: bounds.top - containerBounds.top - $tooltip.height() - 5,
      left: -1
    });
    $tooltip.fadeIn();
  }

  function onMouseOut(a) {
    $tooltip.stop(true, true);
    $tooltip.fadeOut(function () {
      $tooltip.empty();
    });
  }

  MathJax.Hub.Queue(function () {
    $container.on('mouseover', 'a[href*="mjx-eqn-"]', onMouseOver);
    $container.on('mouseout', 'a[href*="mjx-eqn-"]', onMouseOut);
  });

})();