Code Highlighting

nextra-theme-docs uses Prism and prism-react-renderer to highlight the code blocks. This section covers how you can customze it.

More Languages

To keep the bundle small, only a subset of languages are included in the syntax highlighter. If you want to add more languages, you can do the following:

  1. Run yarn add prismjs prism-react-renderer to add dependencies to your Nextra project.
  2. Add the following code to your pages/_app.js:
import Prism from 'prism-react-renderer/prism'
(typeof global !== "undefined" ? global : window).Prism = Prism
require("prismjs/components/prism-kotlin")
require("prismjs/components/prism-csharp")

Restart your app and you will have Kotlin and C# code highlighting supported. You can find the full list of available languages here.