storybook/docs/components/Highlight.js

36 lines
771 B
JavaScript
Raw Normal View History

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