Syntax Highlighting
Nextra uses Shiki to do syntax highlighting at build time. It’s very reliable and performant. For example, adding this in your Markdown file:
```js
console.log('hello, world')
```And it renders:
console.log('hello, world')Features
Inlined Code
Inlined syntax highlighting like let x = 1 is also supported via the {:} syntax:
Inlined syntax highlighting is also supported `let x = 1{:jsx}` via:Highlighting Lines
You can highlight specific lines of code by adding a {} attribute to the code block:
```js {1,4-5}
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```Result:
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}Highlighting Substrings
You can highlight specific substrings of code by adding a // attribute to the code block:
```js /useState/
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}You can highlight only a part of the occurrences of that substring by adding a number it: /str/1, or multiple: /str/1-3, /str/1,3.
Copy Button
By adding a copy attribute, a copy button will be added to the code block when the user hovers over it:
```js copy
console.log('hello, world')
```Renders:
console.log('hello, world')You can enable this feature globally by setting unstable_defaultShowCopyCode: true in your Nextra configuration (next.config.js file). Once it's enabled globally, you can disable it via the copy=false attribute.
Line Numbers
You can add line numbers to your code blocks by adding a showLineNumbers attribute:
```js showLineNumbers
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```Renders:
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}Supported Languages
Check this list for all supported languages.
Customize The Theme
Nextra uses CSS variables to define the colors for tokens. You can inject a global CSS to customize them under light/dark themes. For example this is the default tokens and you can override any of these:
:root {
--shiki-color-text: #414141;
--shiki-color-background: transparent;
--shiki-token-constant: #1976d2;
--shiki-token-string: #22863a;
--shiki-token-comment: #aaa;
--shiki-token-keyword: #d32f2f;
--shiki-token-parameter: #ff9800;
--shiki-token-function: #6f42c1;
--shiki-token-string-expression: #22863a;
--shiki-token-punctuation: #212121;
--shiki-token-link: #22863a;
--nextra-shiki-deleted: #f00;
--nextra-shiki-inserted: #f00;
}
.dark {
--shiki-color-text: #d1d1d1;
--shiki-token-constant: #79b8ff;
--shiki-token-string: #ffab70;
--shiki-token-comment: #6b737c;
--shiki-token-keyword: #f97583;
--shiki-token-parameter: #ff9800;
--shiki-token-function: #b392f0;
--shiki-token-string-expression: #4bb74a;
--shiki-token-punctuation: #bbbbbb;
--shiki-token-link: #ffab70;
}