このサイトの記事(MDX)で使える**自作コンポーネント**の記法と表示例をまとめたマニュアルです。いずれも **import 不要**でそのまま書けます。各セクションは「記法（コードブロック）」と「↓ 表示例（実際のレンダリング）」のセットで載せています。 ## コールアウト（Note / Tips / Warning） `title` を省略すると既定ラベル（Note / Tips / Warning）になります。 ```mdx 補足や注釈に使うノートです。 title で見出し文字を変えられます。注意喚起はこちら。 ``` ↓ 表示例補足や注釈に使うノートです。 title で見出し文字を変えられます。注意喚起はこちら。 ## 汎用キャプション枠 `` 枠の左上に任意のラベルを出せる汎用ブロックです。`label` 省略で枠線だけ、`accent` で色指定。 ```mdx 任意ラベルの枠。関連情報やメモに。ラベル無しの枠線だけブロック。 accent で枠とラベルの色を指定できます。 ``` ↓ 表示例任意ラベルの枠。関連情報やメモに。ラベル無しの枠線だけブロック。 accent で枠とラベルの色を指定できます。 ## 字下げ `` 構造を変えずに見た目だけ字下げします（PC=1.5rem/段・モバイル=0.5rem/段）。`level` で段数指定、ネストも可能。Markdown のスペース字下げ（=コードブロック化）を避けられます。 ```mdx 1段下げの段落。 level で一気に2段下げ。外側ネストした内側（加算される） ``` ↓ 表示例 1段下げの段落。 level で一気に2段下げ。外側ネストした内側（加算される） ## 行間スペース `` 行・ブロックの間に縦の余白だけを足します。空行は Markdown では段落区切りに畳まれて効かないので、明示的に間隔を入れたいときに使います。`size` は `sm / md / lg / xl`（既定 `md`）でサイトの余白トークンに対応します。 ```mdx ここで区切りを入れたい段落。少し離して続けたい段落。 ``` ↓ 表示例ここで区切りを入れたい段落。少し離して続けたい段落。 ## 数学ブロック（定義・定理・証明ほか） `id` / `category` / `title` を指定します（`tags` は任意）。`id` は相互参照に使います。種類は **定義 `` / 定理 `` / 命題 `` / 補題 `` / 系 `` / 公理 `` / 証明 ``**。証明は `id` 等不要で、既定では折りたたまれています（`` で開いた状態に）。なお **例 `` / 注意 `` / 参考 ``** は形式的な主張ではないので、上の汎用枠 `` ベースです（後述）。 ```mdx 定義の本文。インライン数式 $x \in \mathbb{R}$ もOK。定理の主張。証明をここに書きます。 ``` ↓ 表示例定義の本文。インライン数式 $x \in \mathbb{R}$ もOK。定理の主張。証明をここに書きます。 ### その他の種類（命題・補題・系・公理）記法は `` と同じ（`variant` がコンポーネント名で決まるだけ）です。 ```mdx … … … … ``` ↓ 表示例命題の本文。補題の本文。系の本文。公理の本文。 ### 例・注意・参考（汎用枠 Box ベース）例・注意・参考は形式的な主張ではないので、色付きの数学ブロックではなく汎用枠 `` を使います。`title` は任意（ラベルに「：」付きで追記されます）。 ```mdx … … … … … ``` ↓ 表示例例ブロック。$\displaystyle \int_0^1 x\,dx = \frac{1}{2}$ タイトル付きの例。注意ブロック。参考ブロック。 ## 相互参照 `` **数学記事（`content/math-content`）内で** `` などで定義した `id` を指定すると、そのブロックへのリンク（タイトル表示）になります。※ブログ記事内で定義した id は索引対象外なので、ここでは実在する定義を例にしています。 ```mdx を参照してください。 ``` ↓ 表示例を参照してください。 ## ディスプレイ数式の左寄せ `` `$$…$$` は既定で中央寄せですが、`` で囲むと左詰めになります。**中の `$$` は前後を空行で挟む**のがコツです。 ```mdx 通常（中央寄せ）： $$ \int_0^1 x^2 \, dx = \frac{1}{3} $$ 左寄せ： $$ \int_0^1 x^2 \, dx = \frac{1}{3} $$ ``` ↓ 表示例（上＝中央 / 下＝左寄せ） $$ \int_0^1 x^2 \, dx = \frac{1}{3} $$ $$ \int_0^1 x^2 \, dx = \frac{1}{3} $$ ## 外部リンク（インライン）外部サイト（このサイト以外）への通常のリンクは、自動で**別タブで開き**、末尾に外部アイコン ↗ が付きます。記法は普通の Markdown リンクのままで OK です。内部リンク（`/blog` などの相対パスや `#見出し` アンカー）はアイコン無し・同じタブのままです。 ```mdx これは[外部リンク](https://raycast.com/)、こちらは[内部リンク](/blog)です。 ``` ↓ 表示例これは[外部リンク](https://raycast.com/)、こちらは[内部リンク](/blog)です。 ## コンパクトな外部リンクカード `` URL を渡すと OGP を取得して**コンパクトな横型カード**で表示します（SWELL のブログカード風）。通常の外部リンク紹介はこちらを使います。本番環境でのみ取得が動きます。 ```mdx ``` ↓ 表示例 ## 大きめのリンクプレビュー `` `` より大きく、OGP 画像を大きく見せる派手なカードです。アフィリエイト・PR など目立たせたいリンク向け。記法は `` と同じく URL を渡すだけです（本番環境でのみ取得が動きます）。 ```mdx ``` ↓ 表示例

自作コンポーネント使い方ガイド（MDX記法と表示例）