monolithic kernel

Astro のブログに Expressive Code を導入してリッチなコードブロックを実現する

もともと Shiki でシンタックスハイライトしつつ自前で表示を調整していたのだが、いろいろやりたいことがあって、自前で対応するよりは既存のもので済ませたいなと思うようになったので切り替えた。

具体的には、クリップボードにコピーするボタンを配置したかったのと、幅が収まり切らない場合にスクロールではなく折り返し表示したかった。折り返し表示は単純なものならブラウザがやってくれるのだが、ソースコードはインデントで階層を表現しているので、それだと不十分。

Expressive Code には、折り返し時に元の行のインデントを維持してくれる preserveIndent というオプションがあったので、インデントしていても比較的わかりやすく表示できる。追加で行番号も出してあげると折り返ししていることが明確になるのだろうが、限られた幅を行番号に取られてしまうと折り返される頻度が上がって本末転倒な気がしたので、インデントだけで表現するところに落ち着いている。

導入については、公式のドキュメントにもほとんど何も書いてないくらいに簡単。astro add astro-expressive-code がだいたいやってくれる。

ただ、MDX Integration を使っている場合だと、integrations の並び順を調整して mdx よりも expressiveCode が手前になるようにする必要があった。これはビルド時に丁寧なエラーメッセージで教えてくれたので困るほどのことではなかった。

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


export default defineConfig({
  integrations: [
    expressiveCode({
      defaultProps: {
        wrap: true,
        preserveIndent: true,
      },
    }),
    mdx(),
    // ...
  ],
  // ...
})

Related articles