841-biborokuWebフロントエンドの備忘録

Expressive Code導入・Astroでシンタックスハイライトを強化する

AstromicroCMS

前回Astro v5 Content Loader APIで記事詳細を作成したので、今回は詳細ページの本文にシンタックスハイライト適用した手順をまとめました。

現在：Next.js×Prism

現在、コードはmicroCMSにコード用のカスタムフィールドを用意し、以下の内容を登録できるようにしています。

  • コード
  • ファイル名
  • 言語

登録したデータはNext.jsにPrismのスタイルとjsを読み込みコンポーネントで表示しています。

ファイル名の部分は、自作でコードの外に配置しています。

▲ 現在のシンタックスハイライトのキャプチャ

💮採用：Expressive Code

https://expressive-code.com/

AstroにはPrismの組み込みサポートもありますが、PrismとExpressive Codeのインテグレーションの両方を試してファイル名の表示やコピー機能も付いているExpressive Codeを採用することにしました。

ファイル名表示やコピーボタンが標準機能で揃うのが一番の決め手でした。自作していた手間がなくなり簡単に設定できて嬉しいポイントです！

Expressive CodeとPrismの比較

比較項目

Expressive Code

@astrojs/prism

主な特徴

「全部入り」の高機能パッケージ

「必要最小限」のシンプル構成

ハイライト方式

Shiki（VS Codeと同じエンジン）

Prism.js（正規表現ベース）

ファイル名表示

標準機能（title属性で表示）

不可・自作が必要

コピーボタン

標準機能（自動配置）

不可・JSで自作が必要

行ハイライト

標準機能（差分表示も可能）

不可・CSSで工夫が必要

ビルド速度

やや遅い

高速・処理が軽量

ランタイム速度

差なし（ビルド時に静的処理）

差なし（ビルド時に静的処理）

カスタマイズ

設定ファイルで一括変更

複雑な要件はプラグイン作成が必要

CSSを直接書いて調整自由

シンプル・柔軟

Expressive Code導入の流れ

インテグレーション設定とコンポーネントにフィールドの内容を適用するだけなのでとてもシンプルです。

1. パッケージのインストールとAstroインテグレーション設定

npm i astro-expressive-code

astro.config.ts

import astroExpressiveCode from "astro-expressive-code";

export default defineConfig({
  //...略
  integrations: [
    astroExpressiveCode(),
  ],
});

2. コンポーネントに組み込み

microCMSのカスタムフィールドのデータをコンポーネントに組み込みます。

---
import { Code } from 'astro-expressive-code/components'
---
<Code code={コードフィールド} lang={言語フィールド} title={ファイル名のフィールド} />

3. テーマカラーの設定

約60種くらいのテーマカラーが用意されています。

dark / light それぞれ指定しておくと、自動でOS/ブラウザのモードに合わせて切り替えてくれます。

テーマの設定はインテグレーション設定にテーマ名を設定します。

astro.config.ts

import astroExpressiveCode from "astro-expressive-code";

export default defineConfig({
  //...略
  integrations: [
    astroExpressiveCode({
      themes: ["slack-dark", "solarized-light"],  // テーマ名を指定・複数設定可
    }),
  ],
});

Expressive Codeのダークテーマとライトテーマ

サイトにテーマスイッチャーを採用するときには、モードに合わせて切り替わるように実装しようと考えています。

Astro Prism導入の流れ

https://docs.astro.build/ja/guides/syntax-highlighting/

ドキュメントに沿って設定します。

1. パッケージのインストール

npm install @astrojs/prism

2. スタイルシートの読み込み

Prism Themesから好きなスタイルシートをダウンロードしてpublicディレクトリに配置して<link>で読み込みます。

<link rel="stylesheet" href="/public以下にディレクトリを挟んでいる場合/ファイル名.css" />

3. コンポーネントに組み込み

Prismにはコードの表示のみのため、ファイル名やコピー機能は自作する必要があります。

凝ったデザインにしたい・CSSをカスタマイズしたい場合には向いていますが、シンプルに機能を実装したい場合はExpressive Codeの方が圧倒的に手軽です。

---
import { Prism } from '@astrojs/prism'
---
<Prism lang={言語フィールド} code={コードフィールド} />

PrismのVSCodeテーマカラー

まとめ

とにかく簡単！ファイル名・コピーボタン・テーマ切り替えがこれ一つで適用されるのが良い👍

Expressive Codeは設定がシンプルな割に機能が充実していて、導入してよかったです。

📝参考

シェア

Category