Add syntax highlighting to codes using remark-prism plugin

Install

npm install remark-prism --save-dev

Modify next.config.mjs

import remarkPrism from 'remark-prism';
// ...
remarkPlugins: [remarkPrism],
// ...

Modify _document.js to include theme CSS file

// ...
<link rel="stylesheet" href="https://unpkg.com/dracula-prism@2.0.0/dist/css/dracula-prism.css"></link>
// <link rel="stylesheet" href="https://unpkg.com/prism-themes@1.6.0/themes/prism-coy-without-shadows.css"></link>

PrismJS themes

  • https://github.com/PrismJS/prism-themes
  • https://app.unpkg.com/prism-themes@1.6.0/files/themes