Browse Source

highlight <code/> blocks via highlight.js

pull/420/head
Matthew Hodgson 7 years ago
parent
commit
da97185fcd
  1. 1
      package.json
  2. 11
      src/HtmlUtils.js
  3. 1
      src/skins/vector/css/github.css
  4. 14
      src/skins/vector/views/molecules/MNoticeTile.js
  5. 14
      src/skins/vector/views/molecules/MTextTile.js

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

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

1
src/skins/vector/css/github.css

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

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

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

Loading…
Cancel
Save