Merge pull request #1170 from florianorben/PLT-395

PLT-395: Add syntax highlighting to Markdown code blocks

web/react/utils/constants.jsx

@@ -300,6 +300,13 @@ module.exports = {
             uiName: 'Mention Highlight Link'
         }
     ],
+    CODE_THEMES: {
+        github: 'GitHub',
+        solarized_light: 'Solarized light',
+        monokai: 'Monokai',
+        solarized_dark: 'Solarized Dark'
+    },
+    DEFAULT_CODE_THEME: 'github',
     Preferences: {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
         CATEGORY_DISPLAY_SETTINGS: 'display_settings'
@@ -313,5 +320,30 @@ 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',
+        java: 'Java',
+        ini: 'ini'
     }
 };

web/react/utils/markdown.jsx

@@ -6,6 +6,34 @@ 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 highlightJsJava = require('highlight.js/lib/languages/java.js');
+const highlightJsIni = require('highlight.js/lib/languages/ini.js');
+
+const Constants = require('../utils/constants.jsx');
+const HighlightedLanguages = Constants.HighlightedLanguages;
+
 export class MattermostMarkdownRenderer extends marked.Renderer {
     constructor(options, formattingOptions = {}) {
         super(options);
@@ -15,6 +43,43 @@ export 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);
+        highlightJs.registerLanguage('java', highlightJsJava);
+        highlightJs.registerLanguage('ini', highlightJsIni);
+    }
+
+    code(code, language) {
+        if (!language || highlightJs.listLanguages().indexOf(language) < 0) {
+            let parsed = super.code(code, language);
+            return '<code class="hljs">' + $(parsed).text() + '</code>';
+        }
+
+        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() {

web/react/utils/utils.jsx

@@ -403,6 +403,11 @@ export function toTitleCase(str) {
 }
 
 export function applyTheme(theme) {
+    if (!theme.codeTheme) {
+        theme.codeTheme = Constants.DEFAULT_CODE_THEME;
+    }
+    updateCodeTheme(theme.codeTheme);
+
     if (theme.sidebarBg) {
         changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1);
     }
@@ -589,6 +594,27 @@ export function rgb2hex(rgbIn) {
     return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
 }
 
+export function updateCodeTheme(theme) {
+    const path = '/static/css/highlight/' + theme + '.css';
+    const $link = $('link.code_theme');
+    if (path !== $link.attr('href')) {
+        changeCss('code.hljs', 'visibility: hidden');
+        var xmlHTTP = new XMLHttpRequest();
+        xmlHTTP.open('GET', path, true);
+        xmlHTTP.onload = function onLoad() {
+            $link.attr('href', path);
+            if (isBrowserFirefox()) {
+                $link.one('load', () => {
+                    changeCss('code.hljs', 'visibility: visible');
+                });
+            } else {
+                changeCss('code.hljs', 'visibility: visible');
+            }
+        };
+        xmlHTTP.send();
+    }
+}
+
 export function placeCaretAtEnd(el) {
     el.focus();
     if (typeof window.getSelection != 'undefined' && typeof document.createRange != 'undefined') {