Expressive Code のテーマを切り替える
Expressive Code のテーマ切り替えでハマったのでメモ。
Expressive Code とは
Expressive Code は、コードブロックをリッチにするためのライブラリです。
技術系サイトでよく見る、ファイル名が書かれていたり、コピーボタンがあったりするあれです。
astro-expressive-code の導入
Astro を使用しているので、astro-expressive-code を使用します。
npx astro add astro-expressive-code実行すると確認のメッセージが数回出るので yes を選択。
完了すると astro.config.mjs で expressiveCode が設定されています。
import expressiveCode from 'astro-expressive-code';
export default defineConfig({ // ... integrations: [mdx()], integrations: [expressiveCode(), mdx()],});すでに mdx を使えるようにしている場合は、上記のように expressiveCode() を先に記述しないとエラーになりました。
これだけで使えるようになるのは嬉しい。
テーマの切り替え
テーマは themeCssSelector というオプションで設定します。
デフォルトでは、data-theme 属性を github-dark / github-light のようにするとテーマが切り替わります。
私のサイトではテーマを <html data-theme="dark"> のように data-theme 属性で light / dark を切り替えてテーマを変更しているので、次のようにしました。
expressiveCode({ themes: ["github-dark", "github-light"], // デフォルトのテーマです。明示する必要は別にありません。 themeCssSelector: (theme) => `[data-theme="${theme.type}"]`, defaultLocale: "ja", // コピーボタンのタイトルが日本語になると思いましたが、変化がありません。一応設定しています。}),テーマが切り替わるまで、html[data-theme="${theme.type}"] のようにしていて苦戦しました。JSDoc にデフォルトは (theme) => `[data-theme='${theme.name}']` と記述があったので問題に気づけました。
また、ドキュメントをよく読むと customizeTheme というオプションでテーマをカスタマイズできるようです。
私の場合だと、theme.name に theme.type を代入することで、themeCssSelector を設定しなくてもテーマが切り替わるようになりました。
まとめ
- Expressive Code はコードブロックにファイル名やコピーボタンなどを追加できるライブラリです。
- Astro に導入するには
npx astro add astro-expressive-codeを実行します。 - テーマの切り替えは
themeCssSelectorで設定します。タイプセレクタがあると機能しないので注意。
