コンポーネント

MDXドキュメントで使用できるコンポーネント一覧。

ここに記載されているコンポーネントはすべてMDXファイル内でグローバルに利用できます。インポートは不要です。

アドモニション

アドモニションは重要な情報を強調するためのコールアウトブロックです。各タイプは異なる色を持ち、title プロップでデフォルトのタイトルを上書きできます。

Note

Tip

Info

Warning

Danger

アドモニションの構文

<Note>
デフォルトタイトルのNote。
</Note>

<Warning title="注意">
カスタムタイトル付きのWarning。
</Warning>

カラーリファレンス

Mermaidダイアグラム

mermaid言語のフェンスドコードブロックでダイアグラムを描画できます。Mermaidはオンデマンドで読み込まれるため、Mermaidブロックのないページにはオーバーヘッドがありません。

フローチャート

シーケンス図

構文

```mermaid
graph TD
  A --> B
  B --> C
```

サポートされているダイアグラムの種類については、Mermaid公式ドキュメントを参照してください。

タイポグラフィ

以下の標準的なMarkdown/MDX要素は、デザイントークンシステムによってスタイリングされています。

見出し

h2 から h4 までの見出しは、右サイドバーの目次に表示されます。

テキストの書式

これは通常の段落です。太字テキスト、イタリックテキスト、取り消し線テキストを使用できます。太字とイタリックを組み合わせることもできます。

インラインコード

バッククォートでインラインコードを表示できます：const x = 42 や pnpm dev。

コードブロック

フェンスドコードブロックはShikiによるシンタックスハイライトに対応しています。アクティブなカラースキームのテーマが適用されます。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

.container {
  display: flex;
  gap: 1rem;
  align-items: center;
}

---
title: サンプルページ
sidebar_position: 1
---

**Markdown**に対応したコンテンツを記述できます。

箇条書きリスト

• 1つ目の項目
• 2つ目の項目
  • ネストされた項目A
  • ネストされた項目B
• 3つ目の項目

番号付きリスト

1. ステップ1
2. ステップ2
   1. サブステップA
   2. サブステップB
3. ステップ3

引用

これは引用ブロックです。書式付きテキストや複数段落を含めることができます。

同じ引用ブロック内の2番目の段落。

テーブル

リンク

• 内部リンク：ドキュメントの書き方
• 内部リンク：はじめに

水平線

水平線の上のコンテンツ。

水平線の下のコンテンツ。