ハイライターの設定

Slidev はコードハイライターとして Shiki を使用します。これは TextMate Grammar を使用した構文ハイライター で、VS Code と同じくらい正確です。色付きトークンを生成するための、追加の CSS は不要です。Shiki には 多くの組み込みテーマ も付属しています。Slidev では、TwoSlash サポートも提供しています。

Shiki の設定

環境: both

このセットアップ関数は、Node.js とクライアントの両方で実行されます。ランタイムエラーを防ぐために、Node.js や DOM の API の使用は避けてください。

./setup/shiki.ts ファイルを作成して、以下の内容を入力します:

setup/shiki.ts

import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'min-dark',
      light: 'min-light',
    },
    transformers: [
      // ...
    ],
  }
})

カスタムテーマまたは言語 (JSON の TextMate grammar/テーマ) を追加する場合は、セットアップファイルにそれらをインポートできます:

setup/shiki.ts

import { defineShikiSetup } from '@slidev/types'
import customLanguage from './customLanguage.tmLanguage.json'
import customTheme from './customTheme.tmTheme.json'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: customTheme,
      light: 'min-light',
    },
    langs: [
      'js',
      'typescript',
      'cpp',
      customLanguage,
      // ...
    ],
    transformers: [
      // ...
    ],
  }
})

組み込み言語 と 組み込みテーマ を確認し、詳細については Shiki のドキュメント を参照してください。

INFO

現在のところ、Shiki Magic Move はトランスフォーマーをサポートしていません。

Prism の設定

WARNING

Prism サポートは v0.50 以降削除されました。代わりに Shiki を使用してください。