Code Highlighting

nextra-theme-docs uses Prism and prism-react-renderer to highlight the code blocks. This section covers how you can customize 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:

Run yarn add prismjs prism-react-renderer to add dependencies to your Nextra project.
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 .