How to Add Syntax Highlighting to Next.js app router with PrismJS ( Server + Client ) Components

Adding syntax highlighting to your Next.js project can greatly enhance the readability and visual appeal of your code snippets. This guide will walk you through the process of integrating PrismJS into your Next.js application to achieve runtime syntax highlighting.

If you prefer to add syntax highlighting at build time, refer to the guide on How To Add Syntax Highlighting To Markdown With Next.js and Rehype Prism.

Step 1: Initialize Your Next.js Project

First, create a new Next.js project by running the following command:

npx create-next-app@latest

Step 2: Install PrismJS

Next, install PrismJS along with its TypeScript type definitions:

npm install prismjs
npm i --save-dev @types/prismjs

Step 3: Create a PrismLoader Component

Create a new file for the PrismLoader component. This component will handle loading PrismJS and applying the syntax highlighting.

Create a new file at /components/prism-loader.tsx with the following content:

"use client";

import { useEffect } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";
import "prismjs/components/prism-typescript";

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

  return <div className="hidden"></div>;
}

Feel free to choose a different theme or add additional languages by importing the corresponding components from PrismJS.

Step 4: Use the PrismLoader in Your Pages

Finally, include the PrismLoader component in any page where you want to enable syntax highlighting. Here is an example of how to use it in the main page of your application.

Create or modify the file at /app/page.tsx:

import PrismLoader from "@/components/prism-loader";

export default function Home() {
  return (
    <div>
      <pre className="language-js">
        <code className="language-js">console.log("hello world")</code>
      </pre>
      <pre className="language-ts">
        <code className="language-ts">console.log("hello world")</code>
      </pre>
      <PrismLoader />
    </div>
  );
}

Important Note

JavaScript syntax highlighting is supported by default. For other languages, such as TypeScript, you will need to import the specific language components, as shown in the PrismLoader component example.

By following these steps, you can easily add dynamic syntax highlighting to your Next.js project using PrismJS. This setup allows for a clean and visually appealing presentation of your code snippets, enhancing the overall user experience.

Comments

[Sh Raj]