highlight <code/> blocks via highlight.js

This commit is contained in:
Matthew Hodgson 2015-11-21 12:14:56 +00:00
parent b6e9c1eaab
commit da97185fcd
5 changed files with 40 additions and 1 deletions

View File

@ -28,6 +28,7 @@
"filesize": "^3.1.2", "filesize": "^3.1.2",
"flux": "~2.0.3", "flux": "~2.0.3",
"gfm.css": "^1.1.1", "gfm.css": "^1.1.1",
"highlight.js": "^8.9.1",
"linkifyjs": "^2.0.0-beta.4", "linkifyjs": "^2.0.0-beta.4",
"matrix-js-sdk": "https://github.com/matrix-org/matrix-js-sdk.git#develop", "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", "matrix-react-sdk": "https://github.com/matrix-org/matrix-react-sdk.git#develop",

View File

@ -18,6 +18,7 @@ limitations under the License.
var React = require('react'); var React = require('react');
var sanitizeHtml = require('sanitize-html'); var sanitizeHtml = require('sanitize-html');
var highlight = require('highlight.js');
var sanitizeHtmlParams = { var sanitizeHtmlParams = {
allowedTags: [ allowedTags: [
@ -94,6 +95,14 @@ module.exports = {
} }
return body; return body;
},
highlightDom: function(element) {
var blocks = element.getElementsByTagName("code");
for (var i = 0; i < blocks.length; i++) {
highlight.highlightBlock(blocks[i]);
} }
},
} }

View File

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

View File

@ -25,6 +25,20 @@ module.exports = React.createClass({
displayName: 'MNoticeTile', displayName: 'MNoticeTile',
mixins: [MNoticeTileController], 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 // XXX: fix horrible duplication with MTextTile
render: function() { render: function() {
var content = this.props.mxEvent.getContent(); var content = this.props.mxEvent.getContent();

View File

@ -25,6 +25,20 @@ module.exports = React.createClass({
displayName: 'MTextTile', displayName: 'MTextTile',
mixins: [MTextTileController], 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() { render: function() {
var content = this.props.mxEvent.getContent(); var content = this.props.mxEvent.getContent();
var body = HtmlUtils.bodyToHtml(content, this.props.searchTerm); var body = HtmlUtils.bodyToHtml(content, this.props.searchTerm);