Astroのコードブロックに拡張機能「Expressive Code」を導入してみた

コードブロックに必須の拡張機能！

ある日、Astroのコードブロックにコピーボタンがほしいと思いました。

そこで、コードブロック周りのあらゆるところに手が届く拡張機能「Expressive Code」を導入しました。

Expressive Code

astro-expressive-code

この拡張機能……超簡単に導入できる割に、機能がすごい。

今回ほしかった機能を備えていることはもちろん、シンタックスハイライトやdiff表示など、コード表示に重宝するあらゆる機能が標準で備わっています。

加えて、追加プラグインもあるので、人がコードブロックに欲する機能はだいたい揃うんじゃないかと思います（ホントに！）。

（以下、余談ですが）

今回、コピーボタンの他にもう１つ重要な要件として、Markdown（.md/.mdx）のコードブロックだけでなく、Astroファイル（.astro）でも共通の処理を適用してコードブロックを表示したいというのがありました。

なんと！こちらもExpressive Codeでカバーできます。

が、当初はこの要件がクリアできないと勘違いして、自作コンポーネントの実装も検討していました。
自前で実装となると、MarkdownのHTML変換もするのかとか、自作コンポーネントにすべて置き換えるのかとか……絶対にやりたくない！やらずに済んでよかった。余談終わり。

Expressive Codeの導入

導入は、公式ドキュメントの Installation を参考に、コマンドを１つ実行するのみ。

npx astro add astro-expressive-code

実行すると、Astroのconfigファイルの編集も提案してくれるので、問題がなければ Yes! Yes! であっという間に導入が完了します。

導入後、さっそく試してみるとこのような感じ。
テーマやスタイルの変更もしているので、詳細は後述します。

console.log("これで...")
console.log("望んでいた...")
// 行ハイライトもできます
console.log("Markdownのコードブロックにコピーボタンが実装できました！")

// 行ハイライトの先頭に
// 文字も挿入できます

// diff表示
console.log("追加行")
Console.WriteLine("削除行")

標準機能一覧

標準で装備されている機能は以下の通り（リンク先は公式ドキュメント）。

特に、行のハイライトはバリエーションに富んでいるので、一度ドキュメントをチェックしてみるとおもしろいと思います。

追加プラグイン

もっとリッチな機能を求める方も、ご安心を！プラグインを検討してみてください。

ドキュメントにある公式プラグインは、以下があります。

また、Community Pluginsには、よりニッチでおもしろいプラグインがあります。
以下はその一部です。

expressive-code-color-chips：CSSコードにカラープレビューを表示。
expressive-code-twoslash：コードの入力予測やエラーなどの注釈ツールチップ風の表示。
expressive-code-file-icons：ファイル名の拡張子からファイルアイコンを表示。
expressive-code-typewriter：まさにタイピング中のように出現するコード表示。

カスタマイズしてみた

カスタマイズは、Astroのconfigファイルで行います。

そこまで大掛かりなカスタマイズはしていませんが、実際に変更したconfigファイルが以下になります。
変更は大きく２点です。

import mdx from "@astrojs/mdx";
import expressiveCode from "astro-expressive-code";
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [
    expressiveCode({

      themes: ["gruvbox-dark-soft"],


      styleOverrides: {
        frames: {
          inlineButtonBackground: "#0073d9",
          inlineButtonForeground: "#ffffff",
          inlineButtonBorder: "transparent",
          inlineButtonBorderOpacity: "0",
          inlineButtonBackgroundIdleOpacity: "1",
          inlineButtonBackgroundHoverOrFocusOpacity: "1",
          inlineButtonBackgroundActiveOpacity: "0.85",
          tooltipSuccessBackground: "#0073d9",
          tooltipSuccessForeground: "#ffffff",
          frameBoxShadowCssValue: "0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.6)",
        },
      },
    }),
    mdx(),  // expressiveCode() は mdx() より先に記述しないとエラーになります
  ],
});

1. テーマ

themes: ["gruvbox-dark-soft"]

// 複数テーマを使用する例
// themes: ["github-dark", "github-light"]

テーマはgruvbox-dark-softを指定してみました（2026年8月現在）。

標準で内包されているテーマはこちら（公式ドキュメント）。
すぐに変更できるのがうれしいポイント。種類も意外とあります。

その他にも、VS Codeと互換性のあるJSONテーマを導入することも可能です。

ちなみに、テーマは複数指定ができます。
ダークモードに対応していたり、ユーザーが自由にスタイルを選択できるようにしているウェブサイトなども、心配ご無用です。

2. スタイル

styleOverrides: {
  frames: {
    inlineButtonBackground: "#0073d9",  // コピーボタンの色を青に！
    inlineButtonForeground: "#ffffff",
    inlineButtonBorder: "transparent",
    inlineButtonBorderOpacity: "0",
    inlineButtonBackgroundIdleOpacity: "1",
    inlineButtonBackgroundHoverOrFocusOpacity: "1",
    inlineButtonBackgroundActiveOpacity: "0.85",
    tooltipSuccessBackground: "#0073d9",  // 吹き出しの色を青に！
    tooltipSuccessForeground: "#ffffff",

    // コードボックスのシャドウ
    frameBoxShadowCssValue: "0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.6)",
  },
}

サクッと変更できる箇所を探して、コピーボタンとコピー後の吹き出しの色を変えてみました。青で少し目立ちます。
あとは、コードボックスのシャドウを濃くしました。

styleOverridesの全項目一覧はこちら（公式ドキュメント）。
CSSの知見がある方は、ぱっとわかるかと思います（私はClaudeとお話ししながら……）。

ちなみに、アイコンやテキストの変更となると少し踏み込んだカスタマイズが必要になる模様です（CSSで上書きなど）。

Astroファイルに適用する方法

さて、本題ともいえる、.astroファイルへの適用方法についてです。

Astroファイルでも、Markdownのコードブロック（```）と同様のスタイルのコードブロックを使用したい、ということなのですが、何も難しいことはなく、<Code>コンポーネントを使用するだけで実現できます。

import { Code } from 'astro-expressive-code/components'
---

<Code
  lang="js"
  code="console.log('Hello world!')"
  title="test.js"
/>

公式ドキュメントはこちら。

先ほど行った、Astroのconfigファイルのカスタマイズも、Markdownファイルと同じくしっかり適用されました。

これでサイト全体の統一感が保障された！よかった！

おわりに

当初は、「導入、少しめんどくさいかもな……」なんて思っていましたが、びっくりするほど簡単なステップで、超高機能なコードブロックが実現しました。
こんなに簡単に済むなら、最初から入れておけばよかった！

Astroでコードブロックを使用する方には、必須の拡張アイテムと言って、まったく過言じゃなさそうです。

他にも見逃している拡張機能がありそうなので、そのうち探索してみます。

（ちょっと疲労気味で、全体的に言葉がフワフワしていたと思いますが悪しからず……）