Math works for inline syntax

app/assets/javascripts/syntax_highlight.js → app/assets/javascripts/syntax_highlight.js.erb

@@ -9,8 +9,53 @@
 //   <div class="js-syntax-highlight"></div>
 //
 (function() {
+  // CSS and JS for KaTeX
+  CSS_PATH = "<%= asset_path('katex.css') %>";
+  JS_PATH = "<%= asset_path('katex.js') %>";
+
+  // Only load once
+  var katexLoaded = false;
+
+  // Loop over all math elements and render math
+  var renderWithKaTeX = function (elements) {
+    elements.each(function () {
+      $(this).hide();
+      var mathNode = $( "<math>Test</math>" );
+      mathNode.insertAfter($(this));
+
+      katex.render($(this).text(), mathNode.get(0), { displayMode: false })
+    })
+  };
+  var handleMath = function () {
+    var mathElements = $('.code.math');
+
+    if (mathElements.length == 0) return;
+
+    if (katexLoaded) renderWithKaTeX(mathElements);
+    else {
+      // Request CSS file so it is in the cache
+      $.get(CSS_PATH, function(){
+        var css = $('<link>',
+            {rel:'stylesheet',
+              type:'text/css',
+              href: CSS_PATH
+            });
+        css.appendTo('head');
+
+        // Load KaTeX js
+        $.getScript(JS_PATH, function() {
+          katexLoaded = true;
+          renderWithKaTeX(mathElements); // Run KaTeX
+        })
+      });
+    }
+  };
+
   $.fn.syntaxHighlight = function() {
     var $children;
+
+    handleMath();
+
     if ($(this).hasClass('js-syntax-highlight')) {
       // Given the element itself, apply highlighting
       return $(this).addClass(gon.user_color_scheme);

lib/banzai/filter/inline_math_filter.rb

@@ -20,8 +20,6 @@ module Banzai
           closing
         end
 
-        puts doc
-
         doc
       end
     end