How to add syntax highlighting to your Next.js blog

Syntax highlighting is necessary to make code on your articles more readable. In this post, I will show you how you can use Prism to highlight code syntax in your Next.js website.

What is Prism?

Prism is a lightweight JS library that highlights code syntax. All styling is done through CSS, and it contains lots of different custom themes and plugins that highlight syntax for dozens of coding languages.

Prism is also very customizable. You can easily extend any of its original or
community-created themes by copying the CSS and modify it to your liking.

Building out your blog with Next.js

Let's say you are building a personal blog and want to create blog posts. There are two options you can choose from to save blog data inside your database. The first option is to save your blog content as pure HTML and then return the HTML later when the page is loaded. The second option is to use a Markdown language instead. This is much more preferable, because it's safer (you can't load scripts in Markdown), more human-readable, much faster to write, and more widely supported by article rendering libraries.

As such, we will use a library called React Markdown. This library converts text written in Markdown to JSX, which is what Next.js renders. 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>

Setup

To start, let's initialize a Next.js application.

npx create-next-app@latest prism-app

Then cd to prism-app and install react-markdown and prismjs.

In your Next.js app, you can convert Markdown to HTML tags very easily like
such:

import ReactMarkdown from 'react-markdown'

export default function Article({ markdownContent }) {
  return <ReactMarkdown children={markdownContent} />
}

Just like that, React Markdown will handle all Markdown without dangerouslySetInnerHTML, which makes your application safe from scripting attacks.

Styling

To add styles to your syntax, go to Prism's Github repository to find a theme that you like. Apply that to your code by downloading or copy-pasting the CSS file to your local code repo, 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

Now we have imported the styles, we'll need to render the highlights using Prism's highlightAll method. Prism applies these highlights to the data that the React component renders, which needs to happen after the component mounts.

We'll also need to load the JS for each programming language in the blog post. Your code 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 Article({ markdownContent }) {
  useEffect(() => {
    prism.highlightAll()
  }, [])
  return <ReactMarkdown children={markdownContent} />
}

That's all that you need to do for your syntax highlights to look pretty! Feel free to play around with the CSS that you've copied to your codebase to adjust font styles such as the family, colors and sizes! I like to make my font-sizes a little larger (110%) but that's just my personal preference.

Happy coding!