Added CSS classes to markdown headings, links, and tables

1 files changed, 12 insertions, 1 deletions

diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx
index 0a876a3e3..347024e1a 100644
--- a/web/react/utils/markdown.jsx
+++ b/web/react/utils/markdown.jsx
@@ -9,10 +9,17 @@ 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;
 
@@ -20,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 + '"';
         }
@@ -29,6 +36,10 @@ 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);
     }