Astro Docsのようにコードブロックにファイル名を出したり行を強調したりする

Astro Docs は Expressive Code を使ってコードブロックを表示している。
Expressive Code を使えば Astro Docs と同じ見た目にできる。

正確には、Astro Docs が使用している Starlight に Expressive Code が組み込まれている。
Starlight は Astro ベースのドキュメントサイト構築フレームワーク。

表示例

astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import astroExpressiveCode from 'astro-expressive-code';


export default defineConfig({
  integrations: [
    astroExpressiveCode(),
    // astroExpressiveCode() は mdx() の前に入れる必要がある
    mdx(),
  ],
});
example.md
```js {2,3,7-10} "mdx"
// astro.config.mjs