2017-05-03 15:40:59 +10:00
|
|
|
import hljs from 'highlight.js';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
|
|
|
import ReactDOM from 'react-dom';
|
|
|
|
|
|
|
|
class Highlight extends React.Component {
|
|
|
|
componentDidMount() {
|
|
|
|
this.highlightCode();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
this.highlightCode();
|
|
|
|
}
|
|
|
|
|
|
|
|
highlightCode() {
|
2017-06-03 21:03:48 +02:00
|
|
|
const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line
|
2017-05-03 15:40:59 +10:00
|
|
|
const nodes = domNode.querySelectorAll('pre code');
|
2017-06-03 21:03:48 +02:00
|
|
|
|
|
|
|
nodes.forEach(node => {
|
|
|
|
hljs.highlightBlock(node);
|
|
|
|
});
|
2017-05-03 15:40:59 +10:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { children } = this.props;
|
2017-10-02 01:40:46 +03:00
|
|
|
// eslint-disable-next-line react/no-danger
|
2017-05-03 15:40:59 +10:00
|
|
|
return <div dangerouslySetInnerHTML={{ __html: children }} />;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Highlight.propTypes = {
|
2017-06-03 21:03:48 +02:00
|
|
|
children: PropTypes.node.isRequired,
|
2017-05-03 15:40:59 +10:00
|
|
|
};
|
|
|
|
|
|
|
|
export default Highlight;
|