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

How I translated my Next.js Blog

English is my second language and before I was proficient, I always found it really difficult to find tech resources in my own language. That’s why I decided to translate my blog and make all my content available in Spanish. Internationalization with Next.js Next.js has made Internationalization (i18n) a breeze with one of the most[…]

Rules of Micro-Frontends

This is an opinionated list of best practices when designing applications that follow the Micro-frontend pattern

Dark Mode Is Not Enough! Here is an alternative…

These days most websites have an option to toggle Dark mode, but what if I wanted more?