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;