Infoxicator.com

Syntax Highlighter

Published

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;


Recent Posts

Do you own a Car 🚗? Here is how to tackle tech debt.

Most developers struggle to explain to product teams why addressing tech debt or refactoring code is important and why it is valuable to the company.

Modular Monoliths: Have we come full circle?

The promise to bring back the “good old productivity win” of monolithic frameworks like Ruby on Rails but keeping the modularity.

The case against DRY, Micro-Frontends edition.

“Don’t Repeat Yourself” How does a modular architectural approach affect the DRY principle?