语法高亮

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')

可以通过在 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 来全局禁用语法高亮。

选项	类型	描述
codeHighlight	布尔值	启用或禁用语法高亮。默认为 `true`。

自定义语法

Shiki 接受 VSCode TextMate 语法以使用自定义语言语法进行语法高亮。

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

next.config.mjs

import { BUNDLED_LANGUAGES } from 'shiki'
 
nextra({
  // ... other options
  mdxOptions: {
    rehypePrettyCodeOptions: {
      getHighlighter: options =>
        getHighlighter({
          ...options,
          langs: [
            ...BUNDLED_LANGUAGES,
            // custom grammar options, see the Shiki documentation for how to provide these options
            {
              id: 'my-lang',
              scopeName: 'source.my-lang',
              aliases: ['mylang'], // Along with id, aliases will be included in the allowed names you can use when writing Markdown
              path: '../../public/syntax/grammar.tmLanguage.json'
            }
          ]
        })
    }
  }
})

自定义主题

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

next.config.mjs

nextra({
  // ... other options
  mdxOptions: {
    rehypePrettyCodeOptions: {
      // VSCode theme or built-in Shiki theme, see Shiki documentation for more information
      theme: JSON.parse(
        readFileSync('./public/syntax/arctis_light.json', 'utf8')
      )
    }
  }
})

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

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

next.config.mjs

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

Markdown Next.js 链接