Syntax Highlighter

cover image

Adding Prismjs to your React App is as easy as:

  useEffect(() => {
  }, []);

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;

Recent Posts

Is React going anywhere?

Earlier this year I had an interesting conversation with a CTO of a price comparison website (e-commerce) and he mentioned that they are moving away from React. “Wait, what?”… was my Reaction (pun 👊 intended)… please tell me more! “Yeah, it is not working for us, we are moving away for performance reasons, e-commerce is[…]

React Router 6 Deferred Fetch

React Router 6 introduced the “deferred” API that allows you to “await” for critical data and “defer” optional data when calling your loaders.

React Router 6.4 Code-Splitting

Single Page Applications that are unable to migrate can benefit from all of the goodies 🎁 that Remix provides.