# シンタックスハイライト

Slidevには2種類のシンタックスハイライトが付属しており、好みに合わせて選択できます：

• Prism
• Shiki

Prismは最も人気のあるシンタックスハイライトの1つです。ハイライトはトークンクラスにコードを追加することで行われ、CSSによって色付けされます。公式テーマを確認したり、prism-theme-varsを使用して簡単にテーマを作成/カスタマイズすることができます。

一方でShikiはTextMateの文法に対応したシンタックスハイライトです。色付きのトークンを生成するため、追加のCSSは必要ありません。充実した文法サポートにより、生成された色はVS Codeで見るのと同じように非常に正確です。またShikiには多くのビルトインテーマが付属しています。Shikiの欠点は、ハイライトを行うためにTextMateのテーマ（VS Codeのテーマと互換性あり）も必要で、カスタマイズが少し難しくなることです。

Slidevのテーマは通常PrismとShikiの双方をサポートしていますが、使用するテーマによっては、どちらか一方しかサポートしていない場合があります。

選択肢がある場合、基本的にトレードオフです：

• Prismはカスタマイズが容易です。
• Shikiはより正確にハイライトできます。

デフォルトでは、SlidevはPrismを使用します。フロントマターを修正することで、この設定を変更できます：

---
highlighter: shiki
---

# Prismの設定

Prismを設定する場合には、テーマのCSSをインポートするか、prism-theme-varsを使用してテーマを設定することで、ライトモードとダークモードの両方のテーマを設定することができます。詳しくはドキュメントを参照してください。

# Shikiの設定

以下の内容で./setup/shiki.tsファイルを作成します。

/* ./setup/shiki.ts */
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    theme: {
      dark: 'min-dark',
      light: 'min-light',
    },
  }
})

利用可能なテーマの名前については、Shikiのドキュメントを参照してください。

自身のテーマを使用したい場合は次のようにします：

/* ./setup/shiki.ts */

import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(async({ loadTheme }) => {
  return {
    theme: {
      dark: await loadTheme('path/to/theme.json'),
      light: await loadTheme('path/to/theme.json'),
    },
  }
})