![Code blocks with syntax highlighting in Next.js](https://ryancarmody-blog.s3.amazonaws.com/White_Decorative_Daily_Vlog_Youtube_Thumbnail_1_365f7f4093.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=BNCrfJKnhJI" />

## Table of contents
- [Prerequisites](#prerequisites)
- [Step 1: Serialize your markdown with next-mdx-remote](#step-1-serialize-your-markdown-with-next-mdx-remote)
- [Step 2: Install rehype-prism-plus and rehype-code-titles packages](#step-2-install-rehype-prism-plus-and-rehype-code-titles-packages)
- [Step 3: Add mxdOptions to your serialize function](#step-3-add-mxdoptions-to-your-serialize-function)
- [Step 4: Add a Prism.js theme](#step-4-add-a-prismjs-theme)
- [Step 5: Add a code block to your markdown](#step-5-add-a-code-block-to-your-markdown)

## Prerequisites

I will be adding code blocks with syntax highlighting to the blog that I built in the tutorial video [How to make a blog with Next.js, Strapi and GraphQL](https://www.youtube.com/watch?v=jF4_yiO3HVc). You can also view the [source code](https://github.com/rjc23/make-a-blog) of the blog.

The blog uses the [next-mdx-remote](https://www.npmjs.com/package/next-mdx-remote) package which serializes the markdown from a Strapi CMS. You may also have your markdown files locally in your project e.g. `my-first-blog-post.mdx`. This tutorial will still work for you.

If you have not set up your project using `next-mdx-remote`, don't worry, step one will take you through it.

## Step 1: Serialize your markdown with `next-mdx-remote`

If you have not got `next-mdx-remote` installed, run the following in your terminal

```bash
 npm install next-mdx-remote
```
OR if using yarn
```bash
yarn add next-mdx-remote
```

There are multiple ways to convert markdown from a CMS or file system to JSX. For this tutorial, we are using the `serialize` function from `next-mdx-remote`. Here is a snippet from the `getStaticProps()` function. This example is using GraphQL to pull down content from a CMS, but you might be pulling the markdown in from other sources.

```jsx:[slug].js
export async function getStaticProps({ params }) {

    // Get data using GraphQL (This could also be REST API or local mdx files)
    const { data } = await client.query({
        query: GET_INDIVIDUAL_POST,
        variables: { slugUrl: params.slug }
    });

    const attrs = data.blogPosts.data[0].attributes;

    // Serialize the markdown
    const html = await serialize(attrs.content);

    return {
        props: {
            post: {
                title: attrs.title,
                content: html
            }
        }
    }
}
```

Then in the component we can put

```jsx:[slug].js
export default function Post({ post }) {
    return (
        <div>
            <h1>{post.title}</h1>
            <MDXRemote {...post.content} />
        </div>
    )
}
```

The only code, other than CSS we need to change is the following from the snippet above.

```jsx:[slug].js
    // Serialize the markdown
    const html = await serialize(attrs.content);
```

## Step 2: Install `rehype-prism-plus` and `rehype-code-titles` packages

We are going to need to install two packages. You can do that by running the following

```bash
npm install rehype-prism-plus
npm install rehype-code-titles
```
OR if you're using yarn
```bash
yarn add rehype-prism-plus
yarn add rehype-code-titles
```

## Step 3: Add mxdOptions to your serialize function

First import the packages into `[slug].js`, or wherever you serialize your markdown
```jsx:[slug].js
import rehypePrism from 'rehype-prism-plus';
import rehypeCodeTitles from 'rehype-code-titles';
```

then add the following `rehypePlugins` to `mdxOptions` in the `serialize` function

```jsx:[slug].js
    const html = await serialize(attrs.content, { mdxOptions: {
        rehypePlugins: [
            rehypeCodeTitles,
            rehypePrism
        ]
    } });
```

## Step 4: Add a Prism.js theme

You need to add a Prism.js theme, which is just a single CSS file, to your project. Check out this [long list of Prism.js themes](https://github.com/PrismJS/prism-themes). Choose one and add the CSS styles to your project so they are available globally.


## Step 5: Add a code block to your markdown

Code blocks are added in markdown with three back ticks (`). Here is an example

````
## Lets code a for loop in C++

In this tutorial, we will loop through a for loop and print out the values of i

```cpp:main.cpp
for(int i = 0; i < 10; i++) {
     std::cout << i << std::endl;
}
```
````

Notice how we add the language we are using, separated by a colon, then the file name (optional). Prism.js supports a number of [different programming languages](https://prismjs.com/#supported-languages).

The output from the code block in the above section is

```cpp:main.cpp
for(int i = 0; i < 10; i++) {
     std::cout << i << std::endl;
}
```

That's it! You have now successfully added code blocks with syntax highlighting to your Next.js blog!

In this short tutorial, we will add code blocks with syntax highlighting to a markdown Next.js blog using the Prism.js library.

/category/prismjs

Latest articles

How to add code blocks with syntax highlighting to a Next.js blog using MDX with Prism.js