Add latex support

Adds latex highlighting support via https://www.npmjs.com/package/katex
as requested in
https://mattermost.uservoice.com/forums/306457-general/suggestions/10160757-add-latex-support

web/react/.eslintrc

@@ -6,7 +6,7 @@
             "modules": true,
             "classes": true,
             "arrowFunctions": true,
-            "defaultParams": true, 
+            "defaultParams": true
         },
         "parser": "babel-eslint",
         "plugins": [
@@ -22,7 +22,8 @@
             "React": false,
             "ReactDOM": false,
             "ReactBootstrap": false,
-            "Chart": false
+            "Chart": false,
+            "katex": false
         },
         "rules": {
             "comma-dangle": [2, "never"],

web/react/utils/markdown.jsx

@@ -69,6 +69,15 @@ class MattermostMarkdownRenderer extends marked.Renderer {
             usedLanguage = 'xml';
         }
 
+        if (usedLanguage && (usedLanguage === 'tex' || usedLanguage === 'tex')) {
+            try {
+                var html = katex.renderToString(TextFormatting.sanitizeHtml(code), {throwOnError: false, displayMode: true});
+                return '<div class="post-body--code tex">' + html + '</div>';
+            } catch (e) {
+                return '<div class="post-body--code">' + TextFormatting.sanitizeHtml(code) + '</div>';
+            }
+        }
+
         if (!usedLanguage || highlightJs.listLanguages().indexOf(usedLanguage) < 0) {
             let parsed = super.code(code, usedLanguage);
             return '<div class="post-body--code"><code class="hljs">' + TextFormatting.sanitizeHtml($(parsed).text()) + '</code></div>';

web/sass-files/sass/partials/_post.scss

@@ -496,6 +496,9 @@ body.ios {
 				border-bottom-left-radius: 4px;
 				@include opacity(.3);
 			}
+            &.tex .katex-display {
+                text-align: left;
+            }
 			code {
 				white-space: pre;
 			}

web/templates/head.html

@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="/static/css/bootstrap-colorpicker.min.css">
     <link rel="stylesheet" href="/static/css/styles.css">
     <link rel="stylesheet" href="/static/css/google-fonts.css">
+    <link rel="stylesheet" href="/static/css/katex.min.css">
     <link rel="stylesheet" class="code_theme" href="">
 
     <link id="favicon" rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
@@ -38,6 +39,7 @@
     <script src="/static/js/perfect-scrollbar-0.6.7.jquery.min.js"></script>
     <script src="/static/js/jquery-dragster/jquery.dragster.js"></script>
     <script src="/static/js/babel-es6-polyfill.min.js"></script>
+    <script src="/static/js/katex.min.js"></script>
 
     <style id="antiClickjack">body{display:none !important;}</style>