Syntax Highlighter


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

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?