Katex with AngularJS

November 06, 2014

I've recently switched from using MathJax to using KaTeX when rendering maths expressions in the browser. KaTeX is a JavaScript library developed at Khan Academy where there is a lots of maths on some of their pages. The main difference between the two libraries is that, while MathJax runs asynchronously when rendering a page, KaTex blocks the browser until it has finished with the conversion. However, KaTex is much faster than MathJax during conversion which means blocking is not an issue with the added benefit that you don't see equations popping into existence while the page is processed.

I created an AngularJS directive to use in my pages:

angular.module('katex-module')
    .value('mathDefaults', {
        center: True,
        fallback: True
    })
    .directive('katex', ['mathDefaults', function (mathDefaults) {

        function render(katex, text, element) {
            try {
                katex.render(text, element[0]);
            }
            catch(err) {
                // MathJax fallback
                if (mathDefaults.fallback)
                    require(['mathjax'], function (mathjax) {
                        if (text.substring(0, 15) === '\\displaystyle {')
                            text = text.substring(15, text.length-1);
                        element.append(text);
                        mathjax.Hub.Queue(["Typeset", mathjax.Hub, element[0]]);
                    });
                } else
                    element.html("<div class='alert alert-danger' role='alert'>" + err + "</div>");
            }
        }

        return {
            restrict: 'AE',

            link: function (scope, element) {
                var text = element.html();
                if (element[0].tagName === 'DIV') {
                    if (mathDefaults.center)
                        element.addClass('text-center');
                    text = '\\displaystyle {' + text + '}';
                    element.addClass('katex-outer').html();
                }
                if (typeof(katex) === 'undefined')
                    require(['katex'], function (katex) {
                        render(katex, text, element);
                    });
                else
                    render(katex, text, element);
            }
        };
    }]);

I can use the directive for inline expressions such as math:d y_t=\alpha_t dt+\sigma_t d W_t by inserting the mark-up:

To create an expression in a new line one uses the div element:

which renders as:

KaTeX is more limited in the kinds of output it supports than MathJax, sticking to inline-style rendering and a much smaller subset of TeX commands. Murray Bourne has written a comparative blog post and he’s also set up a page where you can compare the output of KaTeX with MathJax.

One can use MathJax as fallback when KaTex fails to render a block of code. The fallback is implemented in the render function above and it is triggered when rendering this equation which is the Heston stochastic volatility model for asset prices

Do you know what they are?

Feedbacks and comments on GitHub