31 lines
940 B
JavaScript
31 lines
940 B
JavaScript
import React, { PureComponent } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
|
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
|
|
|
|
class CodeBlock extends PureComponent {
|
|
/* NOTE: the line-numbers plugin isn't working.
|
|
* See https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/
|
|
* for some clues on how to fix it. */
|
|
static propTypes = {
|
|
value: PropTypes.string.isRequired,
|
|
language: PropTypes.string,
|
|
plugins: PropTypes.arrayOf(PropTypes.string)
|
|
};
|
|
|
|
static defaultProps = {
|
|
language: null,
|
|
plugins: [ "line-numbers" ]
|
|
};
|
|
|
|
render() {
|
|
const { language, plugins, value } = this.props;
|
|
return (
|
|
<SyntaxHighlighter className="line-numbers" language={language} style={okaidia} plugins={plugins}>
|
|
{value}
|
|
</SyntaxHighlighter>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CodeBlock; |