highlight <code/> blocks via highlight.js

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",

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]);
         }
+    },
+
 }
 

src/skins/vector/css/github.css

@@ -0,0 +1 @@
+../../../../node_modules/matrix-react-sdk/node_modules/highlight.js/styles/github.css

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();

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);