diff --git a/frontend/utils/markdown.js b/frontend/utils/markdown.js index f6bc68493..5a830dda9 100644 --- a/frontend/utils/markdown.js +++ b/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 `
${ highlighted }
`; + return `
${highlighted}
`; }; renderer.heading = (text, level) => { const headingSlug = slug(text); @@ -20,22 +22,19 @@ renderer.heading = (text, 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 { diff --git a/package.json b/package.json index 673e84719..1b98a1e08 100644 --- a/package.json +++ b/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",