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で設定する。セレクタの記述方法に注意。