1 files changed, 25 insertions, 1 deletions
diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx
index 96da54217..347024e1a 100644
--- a/web/react/utils/markdown.jsx
+++ b/web/react/utils/markdown.jsx
@@ -1,9 +1,25 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+const TextFormatting = require('./text_formatting.jsx');
+
 const marked = require('marked');
 
 export class MattermostMarkdownRenderer extends marked.Renderer {
+    constructor(options, formattingOptions = {}) {
+        super(options);
+
+        this.heading = this.heading.bind(this);
+        this.text = this.text.bind(this);
+
+        this.formattingOptions = formattingOptions;
+    }
+
+    heading(text, level, raw) {
+        const id = `${this.options.headerPrefix}${raw.toLowerCase().replace(/[^\w]+/g, '-')}`;
+        return `<h${level} id="${id}" class="markdown__heading">${text}</h${level}>`;
+    }
+
     link(href, title, text) {
         let outHref = href;
 
@@ -11,7 +27,7 @@ export class MattermostMarkdownRenderer extends marked.Renderer {
             outHref = `http://${outHref}`;
         }
 
-        let output = '<a class="theme" href="' + outHref + '"';
+        let output = '<a class="theme markdown__link" href="' + outHref + '"';
         if (title) {
             output += ' title="' + title + '"';
         }
@@ -19,4 +35,12 @@ export class MattermostMarkdownRenderer extends marked.Renderer {
 
         return output;
     }
+
+    table(header, body) {
+        return `<table class="markdown__table"><thead>${header}</thead><tbody>${body}</tbody></table>`;
+    }
+
+    text(text) {
+        return TextFormatting.doFormatText(text, this.formattingOptions);
+    }
 }