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.

Installation