ファイルツリー

Prosefly の MDX コンポーネントエディターで例示用のファイルツリーを編集し、Astro や MDX のソースファイルを変更せずに使えます。

対応プロファイル

同じエディターで Astro、Starlight、Fumadocs、Prosefly の各プロファイルを使えます。サイトに合うプロファイルを選ぶと、その連携で利用できる構文と編集コントロールを確認できます。

ビジュアルモードで編集する

ツリー内のファイル名やフォルダー名を編集します。項目のメニューで追加・削除し、フォルダーの配下に配置できます。アイコンやコメントの操作は、プロファイルによって異なります。

項目を移動すると、文書内の例が変わります。対応するリポジトリのファイルを移動・改名することはありません。

file-tree.mdx

StarlightProsefly

ビジュアルソース

サンプルをリセット

エディターを読み込み中…

編集できるサンプルです。変更はこのページ内にのみ保持されます。

ソースの例

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

## ドキュメントのファイル

<FileTree>

- src/
  - content/
    - docs/
      - getting-started.mdx
- astro.config.mjs
- package.json

</FileTree>

プロファイルによる違い

Starlight と Prosefly は、入れ子の Markdown リストを FileTree に入れます。Fumadocs は Files、Folder、File を使います。ソースでは階層を保ってください。編集時のフォルダーの開閉は、公開時の初期表示の設定とは別です。

独自のノードや未対応の属性はソースで編集できます。公開時の見た目は、ドキュメントサイトのプレビューで確認してください。

関連する MDX ガイド

次に読む: カード · ステップ · コールアウト.