语法高亮

Nextra 使用 Shiki 在构建时进行语法高亮。它非常可靠且高效。例如，在您的 Markdown 文件中添加以下内容：

Markdown


```js
console.log('hello, world')
```

结果为：


console.log('hello, world')

功能

行内代码

行内语法高亮如 let x = 1 也通过 {:} 语法支持：

Markdown


Inlined syntax highlighting is also supported `let x = 1{:jsx}` via:

高亮行

您可以通过向代码块添加 {} 属性来高亮特定代码行：

Markdown


```js {1,4-5}
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>
}

高亮子字符串

您可以通过向代码块添加 // 属性来高亮代码的特定子字符串：

Markdown


```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>
}

您可以通过为其添加数字来仅高亮该子字符串的部分出现：/str/1，或多个：/str/1-3、/str/1,3。

复制按钮

通过添加 copy 属性，当用户悬停时，会在代码块中添加复制按钮：

Markdown


```js copy
console.log('hello, world')
```

渲染为：


console.log('hello, world')

Note

您可以通过在 Nextra 配置（next.config.mjs 文件）中设置 defaultShowCopyCode: true 来全局启用此功能。一旦全局启用，您可以通过 copy=false 属性禁用它。

行号

您可以通过添加 showLineNumbers 属性来向代码块添加行号：

Markdown


```js showLineNumbers
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>
}

文件名和标题

您可以通过添加 filename 属性来向代码块添加文件名或标题：

Markdown


```js filename="example.js"
console.log('hello, world')
```

渲染为：

example.js


console.log('hello, world')

ANSI 高亮

您可以高亮 ANSI 转义代码：

Markdown


```ansi
[0m [0;32m✓[0m [0;2msrc/[0mindex[0;2m.test.ts (1)[0m
  [0;2m Test Files [0m [0;1;32m1 passed[0;98m (1)[0m
  [0;2m      Tests [0m [0;1;32m1 passed[0;98m (1)[0m
  [0;2m   Start at [0m 23:32:41
  [0;2m   Duration [0m 11ms
  [42;1;39;0m PASS [0;32m Waiting for file changes...[0m
         [0;2mpress [0;1mh[0;2m to show help, press [0;1mq[0;2m to quit
```

渲染为：


 ✓ src/index.test.ts (1)
   Test Files  1 passed (1)
        Tests  1 passed (1)
     Start at  23:32:41
     Duration  11ms
   PASS  Waiting for file changes...
         press h to show help, press q to quit

支持的语言

查看此列表以获取所有支持的语言。

使用动态内容

由于语法高亮是在构建时完成的，您无法在代码块中使用动态内容。然而，由于 MDX 非常强大，可以通过客户端 JS 进行变通。例如：

dynamic-code.js


function hello() {
  const x = 2 + 3
  console.log(1)
}

此变通方法有一个限制，即更新后的内容不会被重新高亮。例如，如果我们将数字更新为 1 + 1，它将被错误地高亮。

查看代码以了解其工作原理。

禁用语法高亮

您可以选择不使用语法高亮，转而使用自己的方法。您可以通过在 Nextra 配置（next.config.mjs 文件）中设置 codeHighlight: false 来全局禁用语法高亮。

Option	Type	Description
codeHighlight	boolean	启用或禁用语法高亮。默认为 `true`。

自定义语法

Shiki 接受 VSCode TextMate 语法用于带有自定义语言语法的语法高亮。

您可以通过在 next.config.mjs 中的 Nextra 配置的 mdxOptions.rehypePrettyCodeOptions 选项中覆盖 getHighlighter 函数来提供这些语法：

next.config.mjs


import { BUNDLED_LANGUAGES } from 'shiki'
 
nextra({
  // ... other Nextra config options
  mdxOptions: {
    rehypePrettyCodeOptions: {
      getHighlighter: options =>
        getHighlighter({
          ...options,
          langs: [
            ...BUNDLED_LANGUAGES,
            // 自定义语法选项，请参阅 Shiki 文档以了解如何提供这些选项
            {
              id: 'my-lang',
              scopeName: 'source.my-lang',
              aliases: ['mylang'], // 与 id 一起，aliases 将包含在编写 Markdown 时可以使用允许的名称中
              path: '../../public/syntax/grammar.tmLanguage.json'
            }
          ]
        })
    }
  }
})

自定义主题

在 mdxOptions.rehypePrettyCodeOptions 中，您也可以提供自定义主题，而不是依赖 CSS 变量：

next.config.mjs


nextra({
  // ... other Nextra config options
  mdxOptions: {
    rehypePrettyCodeOptions: {
      // VSCode 主题或内置 Shiki 主题，请参阅 Shiki 文档以获取更多信息
      theme: JSON.parse(
        readFileSync('./public/syntax/arctis_light.json', 'utf8')
      )
    }
  }
})

多个主题（深色和浅色模式）

将您的主题传递给 theme，其中键表示颜色模式：

next.config.mjs


nextra({
  // ... other Nextra config options
  mdxOptions: {
    rehypePrettyCodeOptions: {
      theme: {
        dark: 'nord',
        light: 'min-light'
      }
    }
  }
})