How to add syntax highlighting to a Next.js blog

Import the following and add to the imports section at the top of your component.

import { Prism } from "@mantine/prism";

Then using the Prism component and the following properties outlined below you can syntax highlight your code in the exact same way the code is highlighted in this article.

//create a code block with syntax highlighting and horizontal scrolling
  copyLabel="Copy code to clipboard"
  copiedLabel="Code copied to clipboard"
  // withLineNumbers