MFR Markdown update + Mathjax

Updating the markdown renderer to use markdown-it instead of original markdown.

Upgrade bleach

Author: AddisonSchiller

mfr/extensions/md/render.py

@@ -1,17 +1,18 @@
 import os
 
-import markdown
-from markdown.extensions import Extension
+import bleach
+# import markdown
+# from markdown.extensions import Extension
 
 from mako.lookup import TemplateLookup
 
 from mfr.core import extension
 
 
-class EscapeHtml(Extension):
-    def extendMarkdown(self, md, md_globals):
-        del md.preprocessors['html_block']
-        del md.inlinePatterns['html']
+# class EscapeHtml(Extension):
+#     def extendMarkdown(self, md, md_globals):
+#         del md.preprocessors['html_block']
+#         del md.inlinePatterns['html']
 
 
 class MdRenderer(extension.BaseRenderer):
@@ -23,12 +24,12 @@ class MdRenderer(extension.BaseRenderer):
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.metrics.add('markdown_version', markdown.version)
+        # self.metrics.add('markdown_version', markdown.version)
 
     def render(self):
         """Render a markdown file to html."""
         with open(self.file_path, 'r') as fp:
-            body = markdown.markdown(fp.read(), extensions=[EscapeHtml()])
+            body = bleach.clean(fp.read())
             return self.TEMPLATE.render(base=self.assets_url, body=body)
 
     @property

mfr/extensions/md/templates/md.js

@@ -0,0 +1,39 @@
+/* This file is not run, but is used to build static/js/mdbundle.js which is then served in viewer.mako
+You need browserify to build the bundle. In order to build it, you need to npm install the proper packages.
+
+npm install -g browserify
+npm install markdown-it
+npm install @centerforopenscience/markdown-it-toc
+npm install markdown-it-highlightjs
+npm install markdown-it-ins-del
+npm install markdown-it-sanitizer
+npm install markdown-it-mathjax
+
+Once all these are installed, invoke this command from the top level directory
+
+//browserify mfr/extensions/md/templates/md.js -o mfr/server/static/js/mdbundle.js
+This will build the bundle. viewer.mako will automattically use the new file if it in the right directory
+
+*/
+
+
+var MarkdownIt = require('markdown-it');
+
+var bootstrapTable = function(md) {
+    md.renderer.rules.table_open = function() { return '<table class="table">'; };
+};
+
+var markdown = new MarkdownIt('commonmark', {
+    html: false, 
+})
+    // .use(require('markdown-it-video'))
+    .use(require('@centerforopenscience/markdown-it-toc'))
+    .use(require('markdown-it-sanitizer'))
+    .use(require('markdown-it-ins-del'))
+    .enable('table')
+    .use(bootstrapTable)
+    .use(require('markdown-it-highlightjs'), {auto: true, code: true})
+    .use(require('markdown-it-mathjax')())
+    .disable('strikethrough');
+
+document.getElementById("jaxified").innerHTML = markdown.render(document.getElementById("jaxified").innerHTML)

mfr/extensions/md/templates/viewer.mako

@@ -1,8 +1,26 @@
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="static/css/default.css">
-<div style="word-wrap: break-word;" class="mfrViewer">
+<link type="text/css" rel="stylesheet" href="/static/css/default.css">
+<link type="text/css" rel="stylesheet" href="/static/css/highlightjs-default.css">
+
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true},
+        // Don't automatically typeset the whole page. Must explicitly use MathJax.Hub.Typeset
+        messageStyle: "none",
+        skipStartupTypeset: true
+    });
+</script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>
+
+<div style="word-wrap: break-word;" class="mfrViewer" id="jaxified">
 ${body}
 </div>
 
 <script src="/static/js/mfr.js"></script>
 <script src="/static/js/mfr.child.js"></script>
+<script src="/static/js/mdbundle.js"></script>
+
+<script> 
+    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"jaxified"]);
+</script>

mfr/server/static/css/highlightjs-default.css

@@ -0,0 +1,99 @@
+/*
+
+Original highlight.js style (c) Ivan Sagalaev <[email protected]>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #F0F0F0;
+}
+
+
+/* Base color: saturation 0; */
+
+.hljs,
+.hljs-subst {
+  color: #444;
+}
+
+.hljs-comment {
+  color: #888888;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold;
+}
+
+
+/* User color: hue: 0 */
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #880000;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #BC6060;
+}
+
+
+/* Language color: hue: 90; */
+
+.hljs-literal {
+  color: #78A960;
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #397300;
+}
+
+
+/* Meta color: hue: 200 */
+
+.hljs-meta {
+  color: #1f7199;
+}
+
+.hljs-meta-string {
+  color: #4d99bf;
+}
+
+
+/* Misc effects */
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

mfr/server/static/js/mdbundle.js

@@ -44,6 +44,7 @@ xlrd==1.0.0
 
 # Md
 markdown==2.6.2
+bleach==2.0.0
 
 # Issue: certifi-2015.9.6.1 and 2015.9.6.2 fail verification (https://github.com/certifi/python-certifi/issues/26)
 certifi==2015.4.28