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>
Base languages supported
By default, prism-react-renderer only includes a a set of base languages. They are:
markup, jsx, tsx, swift, kotlin, objectivec, js-extras, reason, rust, graphql, yaml, go, cpp, markdown, python, json
Additional languages
To add additional languages, you can import them from the main prismjs package.
You can see which languages are available by checking ./node_modules/prismjs/components/ folder.
import { Prism } from "prism-react-renderer";
(typeof global !== "undefined" ? global : window).Prism = Prism;
require("prismjs/components/prism-java");
PrismJS themes
- https://github.com/PrismJS/prism-themes
- https://app.unpkg.com/prism-themes@1.6.0/files/themes