Added github style HTML sanitization to .md convertion

frontend/utils/markdown.js

@@ -1,16 +1,18 @@
 import slug from 'slug';
-import marked, { Renderer } from 'marked';
+import marked from 'marked';
+import sanitizedRenderer from 'marked-sanitized';
 import highlight from 'highlight.js';
 import emojify from './emojify';
 import _escape from 'lodash/escape';
 
-slug.defaults.mode ='rfc3986';
+slug.defaults.mode = 'rfc3986';
 
+const Renderer = sanitizedRenderer(marked.Renderer);
 const renderer = new Renderer();
 renderer.code = (code, language) => {
   const validLang = !!(language && highlight.getLanguage(language));
   const highlighted = validLang ? highlight.highlight(language, code).value : _escape(code);
-  return `<pre><code class="hljs ${language}">${ highlighted }</code></pre>`;
+  return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
 };
 renderer.heading = (text, level) => {
   const headingSlug = slug(text);
@@ -20,22 +22,19 @@ renderer.heading = (text, level) => {
       <a name="${headingSlug}" class="anchor" href="#${headingSlug}">#</a>
     </h${level}>
   `;
-},
+};
-
-marked.setOptions({
-  renderer: renderer,
-  gfm: true,
-  tables: true,
-  breaks: false,
-  pedantic: false,
-  sanitize: true,
-  smartLists: true,
-  smartypants: true,
-});
 
 // TODO: This is syncronous and can be costly
 const convertToMarkdown = (text) => {
-  return marked(emojify(text));
+  return marked.parse(emojify(text), {
+    renderer,
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false,
+    smartLists: true,
+    smartypants: true,
+  });
 };
 
 export {

package.json

@@ -79,6 +79,7 @@
     "lodash": "4.13.1",
     "lodash.orderby": "4.4.0",
     "marked": "0.3.6",
+    "marked-sanitized": "^0.1.1",
     "mobx": "2.4.1",
     "mobx-react": "3.4.0",
     "mobx-react-devtools": "4.2.0",