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

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

Web Development
#MDX#コンポーネント#ドキュメント

記事(MDX)で使える自作コンポーネントの記法と、実際の表示例をまとめたマニュアル。コールアウト・汎用枠・字下げ・数学ブロック・相互参照・数式の左寄せ・リンクプレビューを一覧で。

このサイトの記事(MDX)で使える自作コンポーネントの記法と表示例をまとめたマニュアルです。いずれも import 不要でそのまま書けます。各セクションは「記法（コードブロック）」と「↓ 表示例（実際のレンダリング）」のセットで載せています。

コールアウト（Note / Tips / Warning）

title を省略すると既定ラベル（Note / Tips / Warning）になります。

MDX
<CalloutNote>
補足や注釈に使うノートです。
</CalloutNote>

<CalloutTips title="ヒント">
title で見出し文字を変えられます。
</CalloutTips>

<CalloutWarning>
注意喚起はこちら。
</CalloutWarning>

↓ 表示例

Note

補足や注釈に使うノートです。

ヒント

title で見出し文字を変えられます。

汎用キャプション枠 <Box>

枠の左上に任意のラベルを出せる汎用ブロックです。label 省略で枠線だけ、accent で色指定。

MDX
<Box label="あわせて読みたい">
任意ラベルの枠。関連情報やメモに。
</Box>

<Box>
ラベル無しの枠線だけブロック。
</Box>

<Box label="ポイント" accent="#0071e3">
accent で枠とラベルの色を指定できます。
</Box>

↓ 表示例

あわせて読みたい

任意ラベルの枠。関連情報やメモに。

ラベル無しの枠線だけブロック。

ポイント

accent で枠とラベルの色を指定できます。

字下げ <Indent>

構造を変えずに見た目だけ字下げします（PC=1.5rem/段・モバイル=0.5rem/段）。level で段数指定、ネストも可能。Markdown のスペース字下げ（=コードブロック化）を避けられます。

MDX
<Indent>
1段下げの段落。
</Indent>

<Indent level={2}>
level で一気に2段下げ。
</Indent>

<Indent>
外側
<Indent>
ネストした内側（加算される）
</Indent>
</Indent>

↓ 表示例

1段下げの段落。

level で一気に2段下げ。

外側

ネストした内側（加算される）

数学ブロック（定義・定理・証明 ほか）

id / category / title を指定します（tags は任意）。id は相互参照に使います。種類は 定義 <Def> / 定理 <Thm> / 命題 <Proposition> / 補題 <Lemma> / 系 <Cor> / 公理 <Axiom> / 証明 <Proof>。証明は id 等不要で、既定では折りたたまれています（<Proof defaultOpen> で開いた状態に）。なお 例 <Example> / 注意 <Remark> / 参考 <Confer> は形式的な主張ではないので、上の汎用枠 <Box> ベースです（後述）。

MDX
<Def id="g-def" category="例" title="定義のタイトル" tags={["基本"]}>
定義の本文。インライン数式 $x \in \mathbb{R}$ もOK。
</Def>

<Thm id="g-thm" category="例" title="定理のタイトル">
定理の主張。
</Thm>

<Proof>
証明をここに書きます。
</Proof>

↓ 表示例

定義

定義のタイトル

定義の本文。インライン数式 もOK。

定理

定理のタイトル

定理の主張。

証明

証明をここに書きます。

その他の種類（命題・補題・系・公理）

記法は <Def> と同じ（variant がコンポーネント名で決まるだけ）です。

MDX
<Proposition id="g-prop" category="例" title="命題">…</Proposition>
<Lemma id="g-lem" category="例" title="補題">…</Lemma>
<Cor id="g-cor" category="例" title="系">…</Cor>
<Axiom id="g-ax" category="例" title="公理">…</Axiom>

↓ 表示例

命題

命題

命題の本文。
補題

補題

補題の本文。
系

系

系の本文。
公理

公理

公理の本文。

例・注意・参考（汎用枠 Box ベース）

例・注意・参考は形式的な主張ではないので、色付きの数学ブロックではなく汎用枠 <Box> を使います。title は任意（ラベルに「：」付きで追記されます）。

MDX
<Example>…</Example>
<Example title="複素数の計算">…</Example>
<Remark>…</Remark>
<Confer>…</Confer>
<Confer title="多価関数">…</Confer>

↓ 表示例

例
例ブロック。。
例：複素数の計算
タイトル付きの例。
注意
注意ブロック。
参考：多価関数
参考ブロック。

相互参照 <MathReference>

数学記事（content/math-content）内で <Def id="..."> などで定義した id を指定すると、そのブロックへのリンク（タイトル表示）になります。※ブログ記事内で定義した id は索引対象外なので、ここでは実在する定義を例にしています。

MDX
<MathReference id="complex-number" /> を参照してください。

↓ 表示例

complex-number を参照してください。

ディスプレイ数式の左寄せ <MathLeft>

$$…$$ は既定で中央寄せですが、<MathLeft> で囲むと左詰めになります。中の $$ は前後を空行で挟むのがコツです。

MDX
通常（中央寄せ）：

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

左寄せ：

<MathLeft>

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

</MathLeft>

↓ 表示例（上＝中央 / 下＝左寄せ）

外部リンク（インライン）

外部サイト（このサイト以外）への通常のリンクは、自動で別タブで開き、末尾に外部アイコン ↗ が付きます。記法は普通の Markdown リンクのままで OK です。内部リンク（/blog などの相対パスや #見出し アンカー）はアイコン無し・同じタブのままです。

MDX
これは[外部リンク](https://raycast.com/)、こちらは[内部リンク](/blog)です。

↓ 表示例

これは外部リンク、こちらは内部リンクです。

コンパクトな外部リンクカード <LinkCard>

URL を渡すと OGP を取得してコンパクトな横型カードで表示します（SWELL のブログカード風）。通常の外部リンク紹介はこちらを使います。本番環境でのみ取得が動きます。

MDX
<LinkCard url="https://raycast.com/" />

↓ 表示例

大きめのリンクプレビュー <LinkPreview>

<LinkCard> より大きく、OGP 画像を大きく見せる派手なカードです。アフィリエイト・PR など目立たせたいリンク向け。記法は <LinkCard> と同じく URL を渡すだけです（本番環境でのみ取得が動きます）。

MDX
<LinkPreview url="https://raycast.com/" />

↓ 表示例

Categories
Categories
Tags
Tags