【Astro】Expressive Codeでスタイリングされたコードブロックを使う方法

Astroプロジェクトにastro-expressive-codeを導入し、コードブロックをスタイリングする方法を紹介します。

前提

• Astroプロジェクトを作成していること。
• MDX（Markdown+JSX）でページを作成していること。

astro-expressive-codeをインストール

Astroプロジェクトのディレクトリに移動し、astro-expressive-codeをインストールします。
以下のコマンドを実行してパッケージをインストールします。

npm install astro-expressive-code

astro.config.mjsファイルにプラグインを追加

プロジェクト配下のastro.config.mjsに、astro-expressive-codeプラグインを追加します。 以下にコード例を示します。

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

export default defineConfig({
  integrations: [
    expressiveCode({
      theme: 'github-dark',
    }),
    mdx()
  ],
});

これで、astro-expressive-codeがAstroプロジェクトに導入され、コードブロックのスタイリングが有効になります。
以下コマンドでAstroプロジェクトを起動して、コードブロックの表示が変わったことをご確認ください。

npm run dev

コードブロックの表示(コマンド)

コマンドに関するコードブロックの表示例を示します。

コードブロック例(コマンド)

プロジェクトのmdxファイルに以下のようなコードブロックを指定します。

```bash title="実行コマンド"
echo 'test'
```

コードブロック出力例(コマンド)

以下のように、コマンドにスタイリングされたブロックが表示されます。

echo 'test'

コードブロックの表示(ソースコード)

ソースコードに関するコードブロックの表示例を示します。

コードブロック例(ソースコード)

プロジェクトのmdxファイルに以下のようなコードブロックを指定します。

```javascript frame="code" title="aaa.js"
alert("aaa");
```

コードブロック出力例(ソースコード)

以下のように、ソースコードにスタイリングされたブロックが表示されます。

alert("aaa");

※本サイトはExpressive Codeのコードブロックを利用して表示しています。

スポンサーリンク