Code Highlighting
Nextra
uses Shiki and
Rehype Pretty Code to
highlight the code blocks. This section covers how you can customze it.
Meta strings
Highlight lines
```jsx {1,3-5}
import 'nextra-theme-docs/style.css'
export default function Nextra({ Component, pageProps }) {
const getLayout = Component.getLayout || (page => page)
return getLayout(<Component {...pageProps} />)
}
```
import 'nextra-theme-docs/style.css'
export default function Nextra({ Component, pageProps }) {
const getLayout = Component.getLayout || (page => page)
return getLayout(<Component {...pageProps} />)
}
Title
```jsx filename="_app.js"
import 'nextra-theme-docs/style.css'
export default function Nextra({ Component, pageProps }) {
const getLayout = Component.getLayout || (page => page)
return getLayout(<Component {...pageProps} />)
}
```
_app.js
import 'nextra-theme-docs/style.css'
export default function Nextra({ Component, pageProps }) {
const getLayout = Component.getLayout || (page => page)
return getLayout(<Component {...pageProps} />)
}
Supported Languages
You can find a list of supported languages here.