シンタックスハイライト

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のシンタックスハイライトをオプトアウトできます。Nextraの設定（next.config.mjs ファイル）で codeHighlight: false を設定することで、シンタックスハイライトをグローバルに無効にできます。

オプション	タイプ	説明
codeHighlight	boolean	シンタックスハイライトを有効または無効にします。デフォルトは `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'
      }
    }
  }
})

Markdown Next.js リンク