MathJax Integration, switching from Misaka to Mistune

app/templates/edit_post.html

@@ -44,6 +44,12 @@ <h4>Loading...</h4>
         </div>
     </div>
 </div>
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+      tex2jax: {inlineMath: [['$','$']]}
+    });
+</script>
+<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 <script>
     $("#click-preview").click(function () {
         $.ajax({
@@ -55,6 +61,7 @@ <h4>Loading...</h4>
                 $('#previewmodal').modal();
                 $('#preview_title').html("<h4>" + $("#{{ form.title.id }}").val() + "</h4>");
                 $("#preview_body").html(result);
+                MathJax.Hub.Typeset()
             }
         });
         return false;

app/utils/markdown.py

@@ -1,12 +1,15 @@
 # -*- coding: utf-8 -*-
 
+import mistune
 import misaka
-from misaka import HtmlRenderer, SmartyPants, BaseRenderer
+from misaka import BaseRenderer
 from pygments import highlight
 from pygments.lexers import get_lexer_by_name
 from pygments.formatters.html import HtmlFormatter
 from pygments.formatters.terminal256 import Terminal256Formatter
 
+from .math import MathInlineMixin, MathRendererMixin
+
 
 class AnsiRenderer(BaseRenderer):
 
@@ -86,30 +89,34 @@ def block_code(self, text, lang):
     extensions=misaka.EXT_FENCED_CODE | misaka.EXT_NO_INTRA_EMPHASIS
 )
 
-class HighlighterRenderer(HtmlRenderer, SmartyPants):
 
-    def block_code(self, text, lang):
-        has_syntax_highlite = False
+class HighlighterRenderer(mistune.Renderer, MathRendererMixin):
+
+    def block_code(self, code, lang=None):
         if not lang:
             lang = 'text'
         try:
             lexer = get_lexer_by_name(lang, stripall=True)
-            if lang != 'text':
-                has_syntax_highlite = True
         except:
             lexer = get_lexer_by_name('text', stripall=True)
-
         formatter = HtmlFormatter()
         return "{open_block}{formatted}{close_block}".format(
-            open_block="<div class='code-highlight'>" if has_syntax_highlite else '',
-            formatted=highlight(text, lexer, formatter),
-            close_block="</div>" if has_syntax_highlite else ''
+            open_block="<div class='code-highlight'>" if lang != 'text' else '',
+            formatted=highlight(code, lexer, formatter),
+            close_block="</div>" if lang != 'text' else ''
         )
 
     def table(self, header, body):
         return "<table class='table table-bordered table-hover'>" + header + body + "</table>"
 
-markdown_renderer = misaka.Markdown(
-    HighlighterRenderer(flags=misaka.HTML_ESCAPE | misaka.HTML_HARD_WRAP | misaka.HTML_SAFELINK),
-    extensions=misaka.EXT_FENCED_CODE | misaka.EXT_NO_INTRA_EMPHASIS | misaka.EXT_TABLES | misaka.EXT_AUTOLINK | misaka.EXT_SPACE_HEADERS | misaka.EXT_STRIKETHROUGH | misaka.EXT_SUPERSCRIPT
-)
+
+class MyInlineLexer(mistune.InlineLexer, MathInlineMixin):
+
+    def __init__(self, *args, **kwargs):
+        super(MyInlineLexer, self).__init__(*args, **kwargs)
+        self.enable_math()
+
+
+renderer = HighlighterRenderer()
+inline = MyInlineLexer(renderer)
+markdown_renderer = mistune.Markdown(renderer=renderer, escape=True, hard_wrap=True, inline=inline)

app/utils/math.py

@@ -0,0 +1,57 @@
+# -*- coding: utf-8 -*-
+
+import re
+
+
+class MathBlockMixin(object):
+    """Math mixin for BlockLexer, mix this with BlockLexer::
+        class MathBlockLexer(MathBlockMixin, BlockLexer):
+            def __init__(self, *args, **kwargs):
+                self.enable_math()
+                super(MathBlockLexer, self).__init__(*args, **kwargs)
+    """
+    def enable_math(self):
+        self.rules.block_math = re.compile(r'^\$\$(.*?)\$\$', re.DOTALL)
+        self.rules.block_latex = re.compile(r'^\\begin\{([a-z]*\*?)\}(.*?)\\end\{\1\}', re.DOTALL)
+        self.default_rules.extend(['block_math', 'block_latex'])
+
+    def parse_block_math(self, m):
+        """Parse a $$math$$ block"""
+        self.tokens.append({
+            'type': 'block_math',
+            'text': m.group(1)
+        })
+
+    def parse_block_latex(self, m):
+        self.tokens.append({
+            'type': 'block_latex',
+            'name': m.group(1),
+            'text': m.group(2)
+        })
+
+
+class MathInlineMixin(object):
+    """Math mixin for InlineLexer, mix this with InlineLexer::
+        class MathInlineLexer(InlineLexer, MathInlineMixin):
+            def __init__(self, *args, **kwargs):
+                self.enable_math()
+                super(MathInlineLexer, self).__init__(*args, **kwargs)
+    """
+
+    def enable_math(self):
+        self.rules.math = re.compile(r'^\$(.+?)\$')
+        self.default_rules.insert(0, 'math')
+
+    def output_math(self, m):
+        return self.renderer.math(m.group(1))
+
+
+class MathRendererMixin(object):
+    def block_math(self, text):
+        return '$$%s$$' % text
+
+    def block_latex(self, name, text):
+        return r'\begin{%s}%s\end{%s}' % (name, text, name)
+
+    def math(self, text):
+        return '$%s$' % text

requirements.txt

@@ -2,6 +2,7 @@ alabaster==0.7.3
 alembic==0.7.4
 Babel==1.3
 beautifulsoup4==4.3.2
+Cython==0.23.2
 docutils==0.12
 Flask==0.10.1
 Flask-Admin==1.0.9
@@ -23,6 +24,7 @@ MarkupSafe==0.23
 marshmallow==1.2.4
 mimerender==0.5.5
 misaka==1.0.2
+mistune==0.7.1
 pycrypto==2.6.1
 Pygments==2.0.2
 python-dateutil==2.4.2