Nextra 3.0 發布了。 閱讀更多
文件指南語法高亮

語法高亮

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 Escape Code

Markdown
```ansi
 ✓ 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
```

渲染結果

 ✓ 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 語法 ，用於自訂語言語法的語法高亮。

您可以在 next.config.mjs 中的 Nextra 設定中的 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'
      }
    }
  }
})
MarkdownNext.js 連結