このサイトの記事(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 ここで区切りを入れたい段落。少し離して続けたい段落。 ``` ↓ 表示例ここで区切りを入れたい段落。少し離して続けたい段落。 ## 注釈リスト `` 補足注釈のリストです。**中身は通常の Markdown リスト（`- 項目`）で書きます**。マーカーは `marker` で選べます（既定 `star`）。 - `star`（既定）… 上付きの「✭）」。本文の脚注マーカーと同じ見た目。`ordered` で「✭1)✭2)…」の番号付き - `paren` … 「(1)(2)…」の自動連番。数式ブロックに番号を振りたいときに - `circle` / `dot` … 「∘」「⋅」の軽いマーカー - `label="Rem."` … 先頭に下線イタリックのラベルを付ける（`cf.` なども） ```mdx - 上付きマーカーの注釈。 - 番号付き注釈の1つ目。 - 2つ目。 - 数式にも使える連番: $\displaystyle\int \frac{dx}{x} = \ln|x| + C$ - 2項目め。 - ラベル付きの注意書き。 ``` ↓ 表示例 - 上付きマーカーの注釈。 - 番号付き注釈の1つ目。 - 2つ目。 - 数式にも使える連番: $\displaystyle\int \frac{dx}{x} = \ln|x| + C$ - 2項目め。 - ラベル付きの注意書き。 ## インライン文字色 `` `` `` `` 本文の一部に色を付けます。色は Notion のテキストカラーを参考にしたトークンで、**ライト/ダーク両テーマに対応**しています。 ```mdx 重要・注意・青字・緑字を本文に混ぜられます。 ``` ↓ 表示例重要・注意・青字・緑字を本文に混ぜられます。数式の中の色はこのコンポーネントではなく、サイト共通の TeX マクロ `\pink{...}` を使います（数式レンダリングガイド参照）。 ## 数学ブロック（定義・定理・証明ほか） `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}$ タイトル付きの例。注意ブロック。参考ブロック。 ## 相互参照 `` `` などで定義した `id` を指定すると、そのブロックへのリンク（タイトル表示・ホバーでプレビュー）になります。`` は別名です。索引対象は**数学記事（`content/math-content`）とブログ記事の両方**で、原典は数学ページ側が基本（ブログで書いた定義は後から数学ページへ昇格させる運用）。存在しない `id` の参照や `id` の重複は**ビルドが失敗**して教えてくれます。 ```mdx を参照してください。同じ記事内の定義（）も参照できます。 ``` ↓ 表示例を参照してください。同じ記事内の定義（）も参照できます。 ## 定義カードの再掲載 `` `` がインラインのリンクなのに対し、`` は **定義・定理カードそのもの**を 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 ``` ↓ 表示例 ## コードブロック（ファイル名・行番号・行ハイライト）コードフェンスの言語指定の後に、半角スペース区切りで meta を付けられます。 - `filename="greet.js"` … ヘッダーにファイル名を表示（言語アイコンは拡張子から自動判定） - `showLineNumbers` … 行番号を表示 - `{2,4-5}` … 指定行をハイライト（青い帯＋左アクセント）。範囲は `-`、複数は `,` 区切りフェンスの記法（先頭行）はこう書きます： `` ```js filename="greet.js" showLineNumbers {2,4-5} `` ↓ 表示例 ```js filename="greet.js" showLineNumbers {2,4-5} function greet(name) { const msg = `Hello, ${name}!`; console.log(msg); if (!name) throw new Error("no name"); return msg; } greet("world"); ``` ## 目次の挿入 `[[toc]]` 本文の任意の場所に `[[toc]]` と書くと、その位置にページ内見出しの目次が挿入されます。項目クリックで該当セクションへスムーズスクロールします。 ```mdx [[toc]] ``` ↓ 表示例（この記事の目次が入ります） [[toc]]

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