highlight code in markdown blocks

6 files changed, 103 insertions, 0 deletions

diff --git a/web/react/package.json b/web/react/package.json
index e6a662375..9af6f5880 100644
--- a/web/react/package.json
+++ b/web/react/package.json
@@ -6,6 +6,7 @@
     "autolinker": "0.18.1",
     "babel-runtime": "5.8.24",
     "flux": "2.1.1",
+    "highlight.js": "^8.9.1",
     "keymirror": "0.1.1",
     "marked": "0.3.5",
     "object-assign": "3.0.0",
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 43d81d322..e65b7337f 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -318,5 +318,28 @@ module.exports = {
         ENTER: 13,
         ESCAPE: 27,
         SPACE: 32
+    },
+    HighlightedLanguages: {
+        diff: 'Diff',
+        apache: 'Apache',
+        makefile: 'Makefile',
+        http: 'HTTP',
+        json: 'JSON',
+        markdown: 'Markdown',
+        javascript: 'JavaScript',
+        css: 'CSS',
+        nginx: 'nginx',
+        objectivec: 'Objective-C',
+        python: 'Python',
+        xml: 'XML',
+        perl: 'Perl',
+        bash: 'Bash',
+        php: 'PHP',
+        coffeescript: 'CoffeeScript',
+        cs: 'C#',
+        cpp: 'C++',
+        sql: 'SQL',
+        go: 'Go',
+        ruby: 'Ruby'
     }
 };
diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx
index e34f3d00a..5be01d055 100644
--- a/web/react/utils/markdown.jsx
+++ b/web/react/utils/markdown.jsx
@@ -6,6 +6,32 @@ const Utils = require('./utils.jsx');
 
 const marked = require('marked');
 
+const highlightJs = require('highlight.js/lib/highlight.js');
+const highlightJsDiff = require('highlight.js/lib/languages/diff.js');
+const highlightJsApache = require('highlight.js/lib/languages/apache.js');
+const highlightJsMakefile = require('highlight.js/lib/languages/makefile.js');
+const highlightJsHttp = require('highlight.js/lib/languages/http.js');
+const highlightJsJson = require('highlight.js/lib/languages/json.js');
+const highlightJsMarkdown = require('highlight.js/lib/languages/markdown.js');
+const highlightJsJavascript = require('highlight.js/lib/languages/javascript.js');
+const highlightJsCss = require('highlight.js/lib/languages/css.js');
+const highlightJsNginx = require('highlight.js/lib/languages/nginx.js');
+const highlightJsObjectivec = require('highlight.js/lib/languages/objectivec.js');
+const highlightJsPython = require('highlight.js/lib/languages/python.js');
+const highlightJsXml = require('highlight.js/lib/languages/xml.js');
+const highlightJsPerl = require('highlight.js/lib/languages/perl.js');
+const highlightJsBash = require('highlight.js/lib/languages/bash.js');
+const highlightJsPhp = require('highlight.js/lib/languages/php.js');
+const highlightJsCoffeescript = require('highlight.js/lib/languages/coffeescript.js');
+const highlightJsCs = require('highlight.js/lib/languages/cs.js');
+const highlightJsCpp = require('highlight.js/lib/languages/cpp.js');
+const highlightJsSql = require('highlight.js/lib/languages/sql.js');
+const highlightJsGo = require('highlight.js/lib/languages/go.js');
+const highlightJsRuby = require('highlight.js/lib/languages/ruby.js');
+
+const Constants = require('../utils/constants.jsx');
+const HighlightedLanguages = Constants.HighlightedLanguages;
+
 class MattermostInlineLexer extends marked.InlineLexer {
     constructor(links, options) {
         super(links, options);
@@ -51,6 +77,41 @@ class MattermostMarkdownRenderer extends marked.Renderer {
         this.text = this.text.bind(this);
 
         this.formattingOptions = formattingOptions;
+
+        highlightJs.registerLanguage('diff', highlightJsDiff);
+        highlightJs.registerLanguage('apache', highlightJsApache);
+        highlightJs.registerLanguage('makefile', highlightJsMakefile);
+        highlightJs.registerLanguage('http', highlightJsHttp);
+        highlightJs.registerLanguage('json', highlightJsJson);
+        highlightJs.registerLanguage('markdown', highlightJsMarkdown);
+        highlightJs.registerLanguage('javascript', highlightJsJavascript);
+        highlightJs.registerLanguage('css', highlightJsCss);
+        highlightJs.registerLanguage('nginx', highlightJsNginx);
+        highlightJs.registerLanguage('objectivec', highlightJsObjectivec);
+        highlightJs.registerLanguage('python', highlightJsPython);
+        highlightJs.registerLanguage('xml', highlightJsXml);
+        highlightJs.registerLanguage('perl', highlightJsPerl);
+        highlightJs.registerLanguage('bash', highlightJsBash);
+        highlightJs.registerLanguage('php', highlightJsPhp);
+        highlightJs.registerLanguage('coffeescript', highlightJsCoffeescript);
+        highlightJs.registerLanguage('cs', highlightJsCs);
+        highlightJs.registerLanguage('cpp', highlightJsCpp);
+        highlightJs.registerLanguage('sql', highlightJsSql);
+        highlightJs.registerLanguage('go', highlightJsGo);
+        highlightJs.registerLanguage('ruby', highlightJsRuby);
+    }
+
+    code(code, language) {
+        if (!language || highlightJs.listLanguages().indexOf(language) < 0) {
+            let parsed = super.code(code, language);
+            return '<code class="hljs">' + parsed.substr(11, parsed.length - 17);
+        }
+
+        let parsed = highlightJs.highlight(language, code);
+        return '<div class="post-body--code">' +
+            '<span class="post-body--code__language">' + HighlightedLanguages[language] + '</span>' +
+            '<code style="white-space: pre;" class="hljs">' + parsed.value + '</code>' +
+            '</div>';
     }
 
     br() {
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 11816efd9..7709e17f3 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -473,6 +473,22 @@ body.ios {
 			white-space: nowrap;
 			cursor: pointer;
 		}
+		.post-body--code {
+			font-size: .97em;
+			position:relative;
+			.post-body--code__language {
+				position: absolute;
+				right: 0;
+				background: #fff;
+				cursor: default;
+				padding: 0.3em 0.5em 0.1em;
+				border-bottom-left-radius: 4px;
+				@include opacity(.3);
+			}
+			code {
+				white-space: pre;
+			}
+		}
 	}
 	.create-reply-form-wrap {
 		width: 100%;
diff --git a/web/static/css/highlight b/web/static/css/highlight
new file mode 120000
index 000000000..c774cf397
--- /dev/null
+++ b/web/static/css/highlight
@@ -0,0 +1 @@
+../../react/node_modules/highlight.js/styles/
\ No newline at end of file
diff --git a/web/templates/head.html b/web/templates/head.html
index 041831ed7..837cfb133 100644
--- a/web/templates/head.html
+++ b/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/highlight/monokai_sublime.css">
 
     <link id="favicon" rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">