Syntax highlighting with Prism and Next.js

You might want to build your blog from scratch, you design your website beautifully, and everything is great, but when it comes to including a block of code inside your blog post, you face some challenges.

Syntax highlighting is a great way to make code more readable; in this tutorial, I will show you how you can use PrismJs with Next.js to highlight the syntax of your code blocks inside your blog posts.

Hi, I'm Dawson, and I love web development. I write blogs and tweets about web development and my most recent projects; please give me a follow if you are interested.

Why PrismJs?

PrismJS is the ideal choice for syntax highlighting with JavaScript right in the browser. PrismJS has support for all modern browsers. It has +5M downloads per week from npmjs.com.

PrismJs is a lightweight, fast syntax highlighting library explicitly made for frontend languages. It depends on community contributions to expand and cover all languages. The highlighting is very customizable and has a variety of languages and themes.

PrismJs It has been designed to be highly customizable with the most beautiful shade of colors, and you can also extend it. And it supports almost every Programming language.

If you want to use a library in your frontend, it is a must for the library to be lightweight because it will run on the client-side (on the user's browser). This means we must use lightweight packages in our frontend of the application.

---

Using PrismJs with Next.js to highlight syntax

PrismJs is a syntax highlighting library. It is designed to use as little of your computer's resources as possible and can be customized with CSS and JavaScript.

This article will show you how to set up PrismJs with Next.js and create a simple syntax highlighter for your blog posts.

How it works?

Let's see how syntax highlighting works in the first place.

Suppose you are building a personal blog and want to create blog posts, you have two options to save your blog data inside your database, one of them is to save your blog content as pure HTML and then return the HTML later when a user shows the page, the better way to do this is using the Markdown language.

Markdown is a lightweight markup language with plain text formatting syntax. It is designed to be easy to read and write for people who are not experts in the computer programming language. The goal of Markdown is to be as easy-to-read and easy to write as possible. A markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.

If you don't know how the Markdown syntax works, please make sure you read it here.

The goal is to get the Markdown from the database and show it on our HTML page, but we can not directly do that because if we do, the reader will see the Markdown syntax, which is not something you'd want to happen.

For that, we will use a library called React Markdown which is a library that converts Markdown to React components (JSX) which is precisely what we need.

This will convert your Markdown syntax to HTML syntax. For example, it converts (# to h1, and ## to h2, etc.), which means now we have pure HTML syntax in our HTML page, which is ideal.

React Markdown automatically puts any Markdown syntax code blocks inside the <pre> tag and then inside the <code> tag, for example:

<pre>
  <code>
    Your code here
  </code>
</pre>

Starting a Next.js app

We first initialize a Next.js application with npx create-next-app@latest prism-app. We will put this in a named folder, in this case (prism-app)

Then go to the directory of your application and install react-markdown and prismjs.

Starting with React Markdown

With React markdown, we will parse our Markdown and convert them to HTML tags. Here is how:

export default function Home ({ markdownContent }) {

  return (
    <div className='container'>
      <ReactMarkdown children={markdownContent} />
    </div>
  )
}

As simple as that, React Markdown will handle all of the Markdown converting with the highest level of safety, which means you are safe from XSS Attacks that users might want to utilize.

Prism Themes

There are various Prism themes that you can apply to your code. Here is how you can use them.

Go to the PrismJS GitHub repository. There are a bunch of themes that you can choose; pick the one you like, download the CSS file, and then import it to your _app.js file.

import '../styles/globals.css'
import '../styles/prism-one-dark.css'

function MyApp ({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Highlighting Syntax with PrismJS

Now that we have the code blocks in our HTML pages and the Prism CSS file, it is time to highlight the syntax to make it more readable and beautiful to the reader.

Since we are using Next.js, we will use the React hook useEffect, and we will run a function when the React component mounts, highlighting all the syntax.

The function that we are planning to run is highlightAll() comes with Prismjs, which will automatically grab the <pre> and <code> blocks and will highlight them all.

We also have to import the JavaScript for each programming language so that PrismJS can highlight a specific programming language. You can import only the programming language that you want to import as few resources as possible, which will make your frontend blazing fast without the user having to download large chunks of JavaScript.

Your JSX should look something like this:

import { useEffect } from 'react'
import Prism from 'prismjs'

require('prismjs/components/prism-javascript')
require('prismjs/components/prism-css')
require('prismjs/components/prism-jsx')

export default function Home ({ markdownContent }) {
  useEffect(() => {
    Prism.highlightAll()
  }, [])

  return (
    <div className='container'>
      <ReactMarkdown children={markdownContent} />
    </div>
  )
}

That's it; now your syntax highlighter must work perfectly; feel free to try the other Prism themes and see which one you like the most.

If you liked this article, please make sure you follow me on Twitter, where I write daily tweets about web development.

Twitter: https://twitter.com/DawsonCodes

Website: https://www.dawsoncodes.com/