From da97185fcd59f8e8aac01ce95d2a835857b11b15 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 21 Nov 2015 12:14:56 +0000
Subject: [PATCH] highlight <code/> blocks via highlight.js

---
 package.json                                    |  1 +
 src/HtmlUtils.js                                | 11 ++++++++++-
 src/skins/vector/css/github.css                 |  1 +
 src/skins/vector/views/molecules/MNoticeTile.js | 14 ++++++++++++++
 src/skins/vector/views/molecules/MTextTile.js   | 14 ++++++++++++++
 5 files changed, 40 insertions(+), 1 deletion(-)
 create mode 120000 src/skins/vector/css/github.css

diff --git a/package.json b/package.json
index fc867ea7..035ccbc1 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "filesize": "^3.1.2",
     "flux": "~2.0.3",
     "gfm.css": "^1.1.1",
+    "highlight.js": "^8.9.1",
     "linkifyjs": "^2.0.0-beta.4",
     "matrix-js-sdk": "https://github.com/matrix-org/matrix-js-sdk.git#develop",
     "matrix-react-sdk": "https://github.com/matrix-org/matrix-react-sdk.git#develop",
diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 52bb7735..5bcc1340 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 var sanitizeHtml = require('sanitize-html');
+var highlight = require('highlight.js');
 
 var sanitizeHtmlParams = {
     allowedTags: [
@@ -94,6 +95,14 @@ module.exports = {
         }
 
         return body;
-    }
+    },
+
+    highlightDom: function(element) {
+        var blocks = element.getElementsByTagName("code");
+        for (var i = 0; i < blocks.length; i++) {
+            highlight.highlightBlock(blocks[i]);
+        }
+    },
+
 }
 
diff --git a/src/skins/vector/css/github.css b/src/skins/vector/css/github.css
new file mode 120000
index 00000000..a78b1581
--- /dev/null
+++ b/src/skins/vector/css/github.css
@@ -0,0 +1 @@
+../../../../node_modules/matrix-react-sdk/node_modules/highlight.js/styles/github.css
\ No newline at end of file
diff --git a/src/skins/vector/views/molecules/MNoticeTile.js b/src/skins/vector/views/molecules/MNoticeTile.js
index 8d8c7792..9883e64b 100644
--- a/src/skins/vector/views/molecules/MNoticeTile.js
+++ b/src/skins/vector/views/molecules/MNoticeTile.js
@@ -25,6 +25,20 @@ module.exports = React.createClass({
     displayName: 'MNoticeTile',
     mixins: [MNoticeTileController],
 
+    componentDidMount: function() {
+        HtmlUtils.highlightDom(this.getDOMNode());
+    },
+
+    componentDidUpdate: function() {
+        HtmlUtils.highlightDom(this.getDOMNode());
+    },
+
+    shouldComponentUpdate: function(nextProps) {
+        // exploit that events are immutable :)
+        return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
+                nextProps.searchTerm !== this.props.searchTerm);
+    },
+
     // XXX: fix horrible duplication with MTextTile
     render: function() {
         var content = this.props.mxEvent.getContent();
diff --git a/src/skins/vector/views/molecules/MTextTile.js b/src/skins/vector/views/molecules/MTextTile.js
index aa5291d7..06cc645e 100644
--- a/src/skins/vector/views/molecules/MTextTile.js
+++ b/src/skins/vector/views/molecules/MTextTile.js
@@ -25,6 +25,20 @@ module.exports = React.createClass({
     displayName: 'MTextTile',
     mixins: [MTextTileController],
 
+    componentDidMount: function() {
+        HtmlUtils.highlightDom(this.getDOMNode());
+    },
+
+    componentDidUpdate: function() {
+        HtmlUtils.highlightDom(this.getDOMNode());
+    },
+
+    shouldComponentUpdate: function(nextProps) {
+        // exploit that events are immutable :)
+        return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
+                nextProps.searchTerm !== this.props.searchTerm);
+    },
+
     render: function() {
         var content = this.props.mxEvent.getContent();
         var body = HtmlUtils.bodyToHtml(content, this.props.searchTerm);