Adding Prismjs to your React App is as easy as:
useEffect(() => {
Prism.highlightAll();
}, []);
Well, not that easy. After searching for a while I realised that to enable additional languages and prism plugins
, a custom configuration is required:
Add the following to your .babelrc
{
"plugins": [
["prismjs", {
"languages": ["javascript", "css", "html", "jsx"],
"plugins": ["line-numbers", "copy-to-clipboard"]
}]
]
}
And there you go! Syntax highlighting in React with custom plugins and additional languages.
import React from 'react';
const MyComponent = () => (
<h1>Hello World </h1>
);
export default MyComponent;