TextualBody: only highlight code block if language was specified

The highlight.js autodetection is finicky and often wrong, so disable
highlighting unless the language was explicitly specified, or if the
user has explicitly enabled it in the settings.

Fixes vector-im/riot-web#508.

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>

src/components/structures/UserSettings.js

@@ -93,6 +93,10 @@ const SETTINGS_LABELS = [
         id: 'disableMarkdown',
         label: 'Disable markdown formatting',
     },
+    {
+        id: 'enableSyntaxHighlightLanguageDetection',
+        label: 'Enable automatic language detection for syntax highlighting',
+    },
 /*
     {
         id: 'useFixedWidthFont',

src/components/views/messages/TextualBody.js

@@ -29,6 +29,7 @@ import Modal from '../../../Modal';
 import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
+import UserSettingsStore from "../../../UserSettingsStore";
 
 linkifyMatrix(linkify);
 
@@ -90,7 +91,18 @@ module.exports = React.createClass({
                 setTimeout(() => {
                     if (this._unmounted) return;
                     for (let i = 0; i < blocks.length; i++) {
-                        highlight.highlightBlock(blocks[i]);
+                        if (UserSettingsStore.getSyncedSetting("enableSyntaxHighlightLanguageDetection", false)) {
+                            highlight.highlightBlock(blocks[i])
+                        } else {
+                            // Only syntax highlight if there's a class starting with language-
+                            let classes = blocks[i].className.split(/\s+/).filter(function (cl) {
+                                return cl.startsWith('language-');
+                            });
+
+                            if (classes.length != 0) {
+                                highlight.highlightBlock(blocks[i]);
+                            }
+                        }
                     }
                 }, 10);
             }

src/i18n/strings/en_EN.json

@@ -268,6 +268,7 @@
   "Email address (optional)": "Email address (optional)",
   "Email, name or matrix ID": "Email, name or matrix ID",
   "Emoji": "Emoji",
+  "Enable automatic language detection for syntax highlighting": "Enable automatic language detection for syntax highlighting",
   "Enable encryption": "Enable encryption",
   "Enable Notifications": "Enable Notifications",
   "enabled": "enabled",