section for code highlighting languages

pages/docs/advanced/code-highlighting.mdx

@@ -0,0 +1,26 @@
+# Code Highlighting
+
+`nextra-theme-docs` uses [Prism](https://prismjs.com) and [prism-react-renderer](https://github.com/FormidableLabs/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](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js)
+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`:
+
+```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](https://github.com/PrismJS/prism/tree/master/components).
+
+{/*## Custom Themes*/}

pages/docs/advanced/meta.json

@@ -0,0 +1,3 @@
+{
+  "code-highlighting": "Code Highlighting"
+}

pages/docs/meta.json

@@ -5,5 +5,6 @@
   "built-in-components": "Built-In Components",
   "ssg": "SSG Support",
   "anchors": "Anchor Links",
-  "i18n": "I18n"
+  "i18n": "I18n",
+  "advanced": "Advanced"
 }