diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index aec32092ed..a32d05e4ff 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -124,6 +124,7 @@ var sanitizeHtmlParams = {
// would make sense if we did
img: ['src'],
ol: ['start'],
+ code: ['class'], // We don't actually allow all classes, we filter them in transformTags
},
// Lots of these won't come up by default because we don't allow them
selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta'],
@@ -165,6 +166,19 @@ var sanitizeHtmlParams = {
attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
return { tagName: tagName, attribs : attribs };
},
+ 'code': function(tagName, attribs) {
+ if (typeof attribs.class !== 'undefined') {
+ // Filter out all classes other than ones starting with language- for syntax highlighting.
+ let classes = attribs.class.split(/\s+/).filter(function(cl) {
+ return cl.startsWith('language-');
+ });
+ attribs.class = classes.join(' ');
+ }
+ return {
+ tagName: tagName,
+ attribs: attribs,
+ };
+ },
'*': function(tagName, attribs) {
// Delete any style previously assigned, style is an allowedTag for font and span
// because attributes are stripped after transforming
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ef574d2ed6..bfbb9831b0 100644
--- a/src/components/structures/UserSettings.js
+++ b/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',
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index d5a1977cdd..190b1341c3 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/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);
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 59853b6e93..6cf2c63785 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",