Merge pull request #1351 from florianorben/latex-support

Add latex support

utils/textgeneration.go

@@ -81,6 +81,21 @@ Markdown | Less | Pretty
 
 `,
 
+	` **[4]** - **[More Markdown Tests]**
+# This is a heading
+
+I am a multiline
+text.
+
+#### I am a level four heading
+
+` + "```tex" + `
+f(x) = \int_{-\infty}^\infty
+    \hat f(\xi)\,e^{2 \pi i \xi x}
+    \,d\xi
+` + "```" + `
+* This was some tex code*
+`,
 	/*	`**[2] [Username Linking Test]**
 		I saw @alice--and I said "Hi @alice!" then "What's up @alice?" and then @alice, was totally @alice; she just "@alice"'d me and walked on by. That's @alice...
 		@alice‽‽

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 === 'latex')) {
+            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;
 			}
@@ -612,79 +615,79 @@ body.ios {
 }
 
 .attachment {
-    .attachment__content {
+	.attachment__content {
-        border-width: 1px;
+		border-width: 1px;
-        border-style: solid;
+		border-style: solid;
-        border-radius: 4px;
+		border-radius: 4px;
-        padding: 2px 5px;
+		padding: 2px 5px;
-        margin: 0 0 5px 0;
+		margin: 0 0 5px 0;
-    }
+	}
-    .attachment__thumb-pretext {
+	.attachment__thumb-pretext {
-        border: 0 none;
+		border: 0 none;
-        background: transparent;
+		background: transparent;
-    }
+	}
-    .attachment__container {
+	.attachment__container {
-        border-left-width: 4px;
+		border-left-width: 4px;
-        border-left-style: solid;
+		border-left-style: solid;
-        padding: 2px 0 2px 10px;
+		padding: 2px 0 2px 10px;
-        &.attachment__container--good {
+		&.attachment__container--good {
-            border-left-color: #00C100;
+			border-left-color: #00C100;
-        }
+		}
-        &.attachment__container--warning {
+		&.attachment__container--warning {
-            border-left-color: #DEDE01;
+			border-left-color: #DEDE01;
-        }
+		}
-        &.attachment__container--danger {
+		&.attachment__container--danger {
-            border-left-color: #E40303;
+			border-left-color: #E40303;
-        }
+		}
-    }
+	}
-    .attachment__body {
+	.attachment__body {
-        float: left;
+		float: left;
-        width: 80%;
+		width: 80%;
-        padding-right: 5px;
+		padding-right: 5px;
-        &.attachment__body--no_thumb {
+		&.attachment__body--no_thumb {
-            width: 100%;
+			width: 100%;
-        }
+		}
-    }
+	}
-    .attachment__text p:last-of-type {
+	.attachment__text p:last-of-type {
-        display: inline-block;
+		display: inline-block;
-    }
+	}
-    .attachment__thumb-pretext {
+	.attachment__thumb-pretext {
-        margin-left: 5px;
+		margin-left: 5px;
-    }
+	}
-    .attachment__title {
+	.attachment__title {
-        margin: 5px 0;
+		margin: 5px 0;
-        padding: 0;
+		padding: 0;
-        line-height: 16px;
+		line-height: 16px;
-        font-size: 16px;
+		font-size: 16px;
-        a {
+		a {
-            font-size: 16px;
+			font-size: 16px;
-        }
+		}
-    }
+	}
-    .attachment__author-icon {
+	.attachment__author-icon {
-        @include border-radius(50px);
+		@include border-radius(50px);
-        margin-right: 5px;
+		margin-right: 5px;
-        width: 14px;
+		width: 14px;
-        height: 14px;
+		height: 14px;
-    }
+	}
-    .attachment__image {
+	.attachment__image {
-        max-width: 100%;
+		max-width: 100%;
-        margin-bottom: 1em;
+		margin-bottom: 1em;
-    }
+	}
-    .attachment__thumb-container {
+	.attachment__thumb-container {
-        width: 20%;
+		width: 20%;
-        float: right;
+		float: right;
-        img {
+		img {
-            max-height: 75px;
+			max-height: 75px;
-            max-width: 100%;
+			max-width: 100%;
-        }
+		}
-    }
+	}
-    .attachment___fields {
+	.attachment___fields {
-        width: 100%;
+		width: 100%;
-        .attachment___field-caption {
+		.attachment___field-caption {
-            font-weight: 700;
+			font-weight: 700;
-        }
+		}
-        .attachment___field p {
+		.attachment___field p {
-            margin: 0;
+			margin: 0;
-        }
+		}
-    }
+	}
-}
+}

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>