Updating the markdown renderer to use markdown-it

 instead of original markdown.

Author: AddisonSchiller

mfr/extensions/md/README.md

@@ -0,0 +1,52 @@
+
+## Markdown plus Mathjax readme
+
+Most of the packages are in there to try to match what the OSF wiki is doing. The two exceptions being markdown-it-highlightjs.js and markdown-it-mathjax.js. The highlighter matches the functionality of what is on the osf however, and the markdown-it-mathjax.js increases functionality with mathjax. 
+
+to get all the libraries needed:
+Note: You do not need to use npm, you can easily get them off of github.
+
+```bash
+npm [email protected]
+npm install @centerforopenscience/[email protected]
+npm install [email protected]
+npm install [email protected]
+npm install [email protected]
+npm install [email protected]
+```
+
+github:
+
+https://github.com/cos-forks/markdown-it-toc
+https://github.com/valeriangalliat/markdown-it-highlightjs
+https://github.com/brianjgeiger/markdown-it-ins-del
+https://github.com/svbergerem/markdown-it-sanitizer
+https://github.com/classeur/markdown-it-mathjax
+
+To add a new library, you need to make sure its loadable in md.js somehow, either through exporting via `root.<name>` or some other means. Some of the markdown plugins added have custom code in them to load them into `root`.
+
+Libraries should try to use the same version as the ones used on the OSF. The plugins do not matter as much, but `markdown-it` and `Mathjax` you should try to match exactly because styling can change between versions.
+
+To add a new library that is not already set up to export to `root` can be a bit tricky but the gist of it is, wrap the plugin in this code:
+
+```javascript
+;(function (root, factory) {
+    if (typeof exports === 'object') {
+        module.exports = factory()
+  } else {
+        root.<PLUGIN_NAME> = factory()
+    }
+})(this, function () {
+
+
+    return function(md){
+
+        .....
+    }
+
+})
+```
+
+And then modify it to work in this context. See other plugins for examples.
+
+Then in md.js, you can add a plugin to the markdown renderer by adding a `.use(window.<PLUGIN_NAME>)` after loading the file into `viewer.mako`.

mfr/extensions/md/render.py

@@ -1,18 +1,10 @@
 import os
 
-import markdown
-from markdown.extensions import Extension
-
+import bleach
 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']
-
+from mfr.extensions.md.settings import BLEACH_WHITELIST
 
 class MdRenderer(extension.BaseRenderer):
 
@@ -23,12 +15,13 @@ class MdRenderer(extension.BaseRenderer):
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        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()])
+            # Bleach will bug out on unclosed tags. OSF wiki does not have this issue.
+            # This is due to versioning problems: https://github.com/mozilla/bleach/issues/271
+            body = bleach.clean(fp.read(), **BLEACH_WHITELIST)
             return self.TEMPLATE.render(base=self.assets_url, body=body)
 
     @property

mfr/extensions/md/settings.py

@@ -0,0 +1,24 @@
+# This list comes from the OSF
+BLEACH_WHITELIST = {
+    'tags': [
+        'a', 'abbr', 'acronym', 'b', 'bdo', 'big', 'blockquote', 'br',
+        'center', 'cite', 'code',
+        'dd', 'del', 'dfn', 'div', 'dl', 'dt', 'em', 'embed', 'font',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins',
+        'kbd', 'li', 'object', 'ol', 'param', 'pre', 'p', 'q',
+        's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup',
+        'table', 'tbody', 'td', 'th', 'thead', 'tr', 'tt', 'ul', 'u',
+        'var', 'wbr',
+    ],
+    'attributes': [
+        'align', 'alt', 'border', 'cite', 'class', 'dir',
+        'height', 'href', 'id', 'src', 'style', 'title', 'type', 'width',
+        'face', 'size',  # font tags
+        'salign', 'align', 'wmode', 'target',
+    ],
+    'styles': [
+        'top', 'left', 'width', 'height', 'position',
+        'background', 'font-size', 'text-align', 'z-index',
+        'list-style',
+    ]
+}

mfr/extensions/md/static/css/default.css

@@ -0,0 +1,17 @@
+@charset "utf-8";
+
+
+/*Had quite a few css woes on this one
+Chrome has some scroll bar issues. This is mostly due to
+Iframe problems. There may be a better combination of CSS to get rid of this, 
+for now just going the best combination found.
+
+*/
+.mfrViewer {
+    font-family: 'Open Sans';
+    padding:1em;
+    background:#fefefe;
+    height: auto;
+    word-wrap: break-word;
+}
+

mfr/extensions/md/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/extensions/md/static/js/markdown-it-highlightjs.js

@@ -0,0 +1,50 @@
+;(function (root, factory) {
+  if (typeof exports === 'object') {
+    module.exports = factory()
+  } else {
+    root.markdownitHightlightjs = factory()
+  }
+})(this, function () {
+
+const maybe = f => {
+  try {
+    return f()
+  } catch (e) {
+    return false
+  }
+}
+
+// Highlight with given language.
+const highlight = (code, lang) =>
+  maybe(() => hljs.highlight(lang, code, true).value) || ''
+
+// Highlight with given language or automatically.
+const highlightAuto = (code, lang) =>
+  lang
+    ? highlight(code, lang)
+    : maybe(() => hljs.highlightAuto(code).value) || ''
+
+// Wrap a render function to add `hljs` class to code blocks.
+const wrap = render =>
+  function (...args) {
+    return render.apply(this, args)
+      .replace('<code class="', '<code class="hljs ')
+      .replace('<code>', '<code class="hljs">')
+  }
+  var defaults = {
+    auto: true,
+    code: true
+  }
+
+  return function(md, opts){
+    opts = Object.assign({}, defaults, opts)
+
+    md.options.highlight = opts.auto ? highlightAuto : highlight
+    md.renderer.rules.fence = wrap(md.renderer.rules.fence)
+
+    if (opts.code) {
+      md.renderer.rules.code_block = wrap(md.renderer.rules.code_block)
+    }
+  }
+
+})