Code Highlighting

Nextra uses Shiki (opens in a new tab) and Rehype Pretty Code (opens in a new tab) 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 (opens in a new tab).