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
<Prism
  className="text-base"
  colorScheme="dark"
  copyLabel="Copy code to clipboard"
  copiedLabel="Code copied to clipboard"
  // withLineNumbers
  language="tsx"
>
  {YOUR_CODE_TO_SYNTAX_HIGHLIGHT}
</Prism>