(最終更新: )

Astroのコードブロックにファイル名を表示する

#Astro#Markdown

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

しかしAstroで構築されてるAstro公式ドキュメント (Astro Docs)ではファイル名を表示したり、さらに行や語句を強調表示したりしている。 例: https://docs.astro.build/ja/guides/markdown-content/

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

Expressive Codeはwebサイトでソースコードを表示するための独立したライブラリ。 Astro DocsはAstroベースのドキュメントサイト構築フレームワークのStarlightで構築されていて、StarlightにExpressive Codeが組み込まれている。

表示例

このように書くと

Markdown
```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(),
  ],
});
```

こんな感じになる。

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
...
```
````