Switch math rendering to KaTeX

index.html

@@ -295,7 +295,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
               <td class="prefix"><a ng-click="addMention(bufferline.prefix)"><span class="hidden-bracket">&lt;</span><span ng-repeat="part in ::bufferline.prefix" ng-class="::part.classes" ng-bind="::part.text|prefixlimit:25"></span><span class="hidden-bracket">&gt;</span></a></td><!--
            --><td class="message"><!--
              --><div ng-repeat="metadata in ::bufferline.metadata" plugin data="::metadata"></div><!--
-             --><span ng-repeat="part in ::bufferline.content" class="text" ng-class="::part.classes.concat(['line-' + part.$$hashKey.replace(':','_')])" ng-bind-html="::part.text | linky:'_blank' | DOMfilter:'irclinky' | DOMfilter:'emojify':settings.enableJSEmoji | DOMfilter:'inlinecolour' | DOMfilter:'mathjax':('.line-' + part.$$hashKey.replace(':','_')):settings.enableMathjax"></span>
+             --><span ng-repeat="part in ::bufferline.content" class="text" ng-class="::part.classes.concat(['line-' + part.$$hashKey.replace(':','_')])" ng-bind-html="::part.text | linky:'_blank' | DOMfilter:'irclinky' | DOMfilter:'emojify':settings.enableJSEmoji | DOMfilter:'inlinecolour' | DOMfilter:'latexmath':('.line-' + part.$$hashKey.replace(':','_')):settings.enableMathjax"></span>
               </td>
             </tr>
             <tr class="readmarker" ng-if="activeBuffer().lastSeen==$index">

js/filters.js

@@ -175,15 +175,23 @@ weechat.filter('emojify', function() {
     };
 });
 
-weechat.filter('mathjax', function() {
+weechat.filter('latexmath', function() {
     return function(text, selector, enabled) {
-        if (!enabled || typeof(MathJax) === "undefined") {
+        if (!enabled || typeof(katex) === "undefined") {
             return text;
         }
         if (text.indexOf("$$") != -1 || text.indexOf("\\[") != -1 || text.indexOf("\\(") != -1) {
-            // contains math
-            var math = document.querySelector(selector);
-            MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);
+            // contains math -> delayed rendering
+            setTimeout(function() {
+                var math = document.querySelector(selector);
+                renderMathInElement(math, {
+                    delimiters: [
+                        {left: "$$", right: "$$", display: false},
+                        {left: "\\[", right: "\\]", display: true},
+                        {left: "\\(", right: "\\)", display: false}
+                    ]
+                });
+            });
         }
 
         return text;

js/glowingbear.js

@@ -382,26 +382,17 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     });
 
     // To prevent unnecessary loading times for users who don't
-    // want MathJax, load it only if the setting is enabled.
+    // want LaTeX math, load it only if the setting is enabled.
     // This also fires when the page is loaded if enabled.
+    // Note that this says MathJax but we switched to KaTeX
     settings.addCallback('enableMathjax', function(enabled) {
         if (enabled && !$rootScope.mathjax_init) {
             // Load MathJax only once
             $rootScope.mathjax_init = true;
-            (function () {
-                var head = document.getElementsByTagName("head")[0], script;
-                script = document.createElement("script");
-                script.type = "text/x-mathjax-config";
-                script[(window.opera ? "innerHTML" : "text")] =
-                    "MathJax.Hub.Config({\n" +
-                    "  tex2jax: { inlineMath: [['$$','$$'], ['\\\\(','\\\\)']], displayMath: [['\\\\[','\\\\]']] },\n" +
-                    "});";
-                head.appendChild(script);
-                script = document.createElement("script");
-                script.type = "text/javascript";
-                script.src  = "//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML";
-                head.appendChild(script);
-            })();
+
+            utils.inject_css("https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css");
+            utils.inject_script("https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js");
+            utils.inject_script("https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/contrib/auto-render.min.js");
         }
     });
 
@@ -415,14 +406,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         }
 
         // Load new theme
-        (function() {
-            var elem = document.createElement("link");
-            elem.rel = "stylesheet";
-            elem.href = "css/themes/" + theme + ".css";
-            elem.media = "screen";
-            elem.id = "themeCSS";
-            document.getElementsByTagName("head")[0].appendChild(elem);
-        })();
+        utils.inject_css("css/themes/" + theme + ".css", "themeCSS");
     });
 
     settings.addCallback('customCSS', function(css) {

js/utils.js

@@ -21,9 +21,32 @@ weechat.factory('utils', function() {
         return (document.body.clientWidth < mobile_cutoff);
     };
 
+
+    // Inject a javascript (used by KaTeX)
+    var inject_script = function(script_url) {
+        var script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src  = script_url;
+        var head = document.getElementsByTagName("head")[0];
+        head.appendChild(script);
+    };
+    // Inject a stylesheet (used by KaTeX and theme switching)
+    var inject_css = function(css_url, id) {
+        var elem = document.createElement("link");
+        elem.rel = "stylesheet";
+        elem.href = css_url;
+        if (id)
+            elem.id = id;
+        var head = document.getElementsByTagName("head")[0];
+        head.appendChild(elem);
+    };
+
+
     return {
     	changeClassStyle: changeClassStyle,
     	getClassStyle: getClassStyle,
-    	isMobileUi: isMobileUi
+        isMobileUi: isMobileUi,
+        inject_script: inject_script,
+        inject_css: inject_css,
     };
 });