ステップ

タスクの番号付きリストをスタイル設定してステップバイステップのガイドを作成するには、<Steps>コンポーネントを使用します。

プレビュー

1. 新しいStarlightプロジェクトを作成します:

   npm

   npm create astro@latest -- --template starlight

   pnpm

   pnpm create astro --template starlight

   Yarn

   yarn create astro --template starlight

2. 最初のドキュメントページを書きます。

インポート

import { Steps } from '@astrojs/starlight/components';

使用方法

<Steps>コンポーネントを使用して、タスクの番号付きリストをスタイル設定します。 各ステップを明確に強調する必要がある、より複雑なステップバイステップガイドに役立ちます。

<Steps>で標準のMarkdownの順序付きリストを囲みます。 通常のMarkdown構文はすべて<Steps>内で適用されます。

MDX

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. コンポーネントをMDXファイルにインポートします:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. 順序付きリストのアイテムを`<Steps>`で囲みます。

</Steps>

Markdoc

{% steps %}

1. コンポーネントをMDXファイルにインポートします:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. 順序付きリストのアイテムを`<Steps>`で囲みます。

{% /steps %}

プレビュー

1. コンポーネントをMDXファイルにインポートします:

   import { Steps } from '@astrojs/starlight/components';

2. 順序付きリストのアイテムを<Steps>で囲みます。

<Steps> プロパティ

実装: Steps.astro

<Steps>コンポーネントはプロパティを受け付けません。