AstroのStepsコンポーネント使用時のルール

Astro（Starlight）の <Steps> コンポーネントを使用する際、以下のようなエラーに遭遇することがある。

このエラーが発生する主な原因は、<Steps> 内のリスト項目の内容（テキストやコードブロックなど）を適切にインデント（スペース3〜4個）していないことである。順序付きリストの番号（1., 2. など）自体はインデントせず、その下の要素をインデントする必要がある。

エラーを解決するための具体的な記述方法

公式ドキュメントの例を参考に、正しい記述手順を解説する。

コンポーネントのインポート

ファイルの先頭付近で Steps コンポーネントをインポートする。
```
import { Steps } from '@astrojs/starlight/components';
```

順序付きリストを <Steps> で囲み、内容をインデントする

リスト番号の下の行は、必ずスペースでインデント（通常は4つ）する。

<Steps>

1. リストの項目を記述する:

   ← 4つのスペースを入れてインデントする。
   4 spaces inputs to left.

2. 次の項目である。

</Steps>

番号（1. など）自体をインデントすると、Markdownパーサーが意図した順序付きリストとして認識せず、別のエラーや表示崩れを引き起こす原因となる。番号はインデントせず行頭から記述し、その内容のみをインデントすることが重要である。

環境情報

他の記事を探す