nextjs add Syntax highlighting code


To add syntax highlighting to code blocks in a Next.js application, you can use a syntax highlighting library such as Prism.js.

Here is an example of how to use Prism.js to add syntax highlighting to a code block:

  1. Install Prism.js by running the following command in your terminal:
npm install prismjs
  1. Import the Prism.js CSS styles and the required language module in your Next.js page or component:
import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-javascript';
  1. Use the pre and code elements to define a code block. For example:
  <code className="language-javascript">
    // code goes here
  1. Set the language-* class on the code element to specify the programming language for the code block. For example, language-javascript for JavaScript code.

  2. Initialize Prism.js to apply the syntax highlighting to the code block. You can do this by adding the following script to your page or component:

import Prism from 'prismjs';


This will apply syntax highlighting to all code blocks on the page or component.

You can also customize the appearance of the syntax highlighting by modifying the CSS styles in the Prism.js theme file.