【Astro】Expressive Codeでコードブロックを使う方法

Amazonのアソシエイトとして、IT技術ライフは適格販売により収入を得ています。

記事の文字数：1953

Astroプロジェクトにastro-expressive-codeを導入し、コードブロックをスタイリングする方法を紹介します。基本的な使い方から形式・タイトル・フレームの指定方法、行番号の表示を可能にするplugin-line-numbersプラグインについても解説します。

2024/10/26 2025/3/6 更新

Astro

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

前提

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

expressive-codeインストール

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

1
npm install astro-expressive-code

astro.config.mjs編集

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

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

5
export default defineConfig({
6
  integrations: [
7
    expressiveCode({
8
      theme: 'github-dark',
9
    }),
10
    mdx()
11
  ],
12
});

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

1
npm run dev

コードブロックの表示

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

基本的な使い方

コードブロックは```で値を囲うことで利用できます。

1
```
2
コードブロックです
3
```

表示例

1
コードブロックです

形式を指定する

プレーンテキストやプログラミング言語、コマンド等の形式を指定することができます。

1
```plaintext
2
こんにちは！
3
```
4

5
```python
6
numbers = [1, 2, 3, 4, 5]
7
for num in numbers:
8
    print(num)
9
```
10

11
```bash
12
echo "test"
13
```

表示例（プレーンテキスト）

こんにちは！

表示例（Python）

numbers = [1, 2, 3, 4, 5]
for num in numbers:
    print(num)

表示例（コマンド）

echo "test"

タイトルを表示する

コードブロックにタイトルをつける例です。
プロジェクトのmdxファイルに、titleを指定してコードブロックを作成します。

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

表示例

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

echo 'test'

フレームを指定する

1
```plaintext title="ソースコード" frame="code"
2
コードブロックです
3
```
4
```plaintext title="ターミナル" frame="terminal"
5
コードブロックです
6
```

表示例（コード）

コードブロックです

表示例（ターミナル）

コードブロックです

特定の行をハイライトする

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

1
```javascript title="test.js" {2}
2
var value = aaa;
3
alert(value);
4
```

表示例

以下のように、2行目のコードがハイライトされて表示されます。

var value = aaa;
alert(value);

行番号を表示する

line-numbersインストール

コードブロックに行番号を表示するにはplugin-line-numbersプラグインをインストールします。

1
npm install @expressive-code/plugin-line-numbers

以下のようにastro.config.mjsのコードを修正します。

1
import { defineConfig } from 'astro/config';
2
import expressiveCode from 'astro-expressive-code';
3
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
4
import mdx from '@astrojs/mdx';
5

6
export default defineConfig({
7
  integrations: [
8
    expressiveCode({
9
      theme: 'github-dark',
10
      plugins: [pluginLineNumbers()],
11
    }),
12
    mdx(),
13
  ],
14
});

行番号の表示・非表示

行番号を表示する場合は、showLineNumbers=trueを指定し、非表示にする場合はshowLineNumbers=falseを指定します。
※showLineNumbers未指定の場合は、行番号が表示されます。

1
```plaintext showLineNumbers=true
2
行番号を表示します。
3
行番号を表示します。
4
行番号を表示します。
5
```
6

7
```plaintext showLineNumbers=false
8
行番号を表示しません。
9
行番号を表示しません。
10
行番号を表示しません。
11
```

表示例（行番号を表示）

1
行番号を表示します。
2
行番号を表示します。
3
行番号を表示します。

表示例（行番号を非表示）

行番号を表示しません。
行番号を表示しません。
行番号を表示しません。

オプションまとめ

紹介したオプションをまとめると以下の通りになります。

オプション	説明
`title`	コードブロックのタイトルを指定する
`frame`	コードブロックのフレームを指定する（`auto`, `code`, `terminal`, `none`）
`showLineNumbers`	行番号を表示する（`true` で有効、`false` で無効）
`{n}`	特定の行をハイライトする（例：`{1}` で1行目をハイライト）

以上で本記事の解説を終わります。
よいITライフを！

前提