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

Astro は標準でコードブロックのシンタックスハイライトに対応しているが、Qiita などの Markdown のようにファイル名を表示する機能がない。

しかし Astro Docs ではファイル名を表示したり、さらに行や語句を強調表示したりしている。
例: https://docs.astro.build/ja/guides/markdown-content/

これらの機能は Expressive Code を使って実現されている。
Expressive Code を使えば Astro Docs と同じように表示できる。

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

表示例

このように書くと

```js ins={4,8} "mdx"
// 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(),
  ],
});

おまけ: コードブロック内に ``` を書く

バッククォートを4つ以上にすればその中で ``` を書ける。

````text title=Markdown
```js ins={4,8} "mdx"
// astro.config.mjs
...
```
````