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:

1. Run yarn add prismjs prism-react-renderer to add dependencies to your Nextra project.
2. Add the following code to your pages/_app.jsx:

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.