コードハイライト

Methanol は、Starry Night を使用してコードブロックの構文ハイライトを行います（rehype-starry-night 経由）。この機能はデフォルトで有効です。

有効化と無効化

デフォルトで有効です。必要に応じて methanol.config.* 内で starryNight オプションを設定します。

// methanol.config.js
export default () => ({
	starryNight: true
})

明示的に無効化する場合:

// methanol.config.js
export default () => ({
	starryNight: false
})

CLI で一時的に切り替えることも可能です（1 回のビルドのみ有効）:

npx methanol build --highlight
npx methanol build --no-highlight

ページ単位での設定上書き

各ページのフロントマター設定は、グローバル設定よりも優先されます。

---
starryNight: true
---

他のハイライターへの置き換え

Starry Night 以外のソリューションを使用する場合の手順:

  1. starryNight: false で標準機能を無効化します。
  2. mdx 設定オプションを通じて、任意のリハイク（rehype）プラグインを追加します。
export default () => ({
	starryNight: false,
	mdx: () => ({
		rehypePlugins: [/* 任意のハイライト用プラグイン */]
	})
})

スタイリング

Methanol は、ハイライト用の CSS を自動的に挿入しません。使用するテーマ側で必要なスタイルを読み込むか、独自にスタイル定義を用意してください。

言語の自動読み込み

Methanol はコンテンツ内のフェンスコードに指定された言語を検出し、Starry Night が対応している文法を自動で読み込みます。通常は手動設定は不要です。

次の場合のみ starryNight.grammars を設定してください。

サポート言語の上書き

文法セットを上書き／拡張したい場合は、starryNight.grammars を指定します。

import sourceMDX from '@wooorm/starry-night/source.mdx'

export default () => ({
	starryNight: {
		grammars: [sourceMDX]
	}
})

※ 追加の文法データを読み込むには、プロジェクトに @wooorm/starry-night を直接インストールする必要があります。