nextjs add Syntax highlighting code [nextjs]

nextjs

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:

npm install prismjs

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';

<pre>
  <code className="language-javascript">
    // code goes here
  </code>
</pre>

Set the language-* class on the code element to specify the programming language for the code block. For example, language-javascript for JavaScript code.
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';

Prism.highlightAll();

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.