Markdown 拡張機能
この記事では、Retypeset テーマがサポートする Markdown 拡張機能について、構文例とその効果を紹介します。
図のキャプション
標準の Markdown 画像構文  を使用すると、自動的に図のキャプションが生成されます。alt テキストの前にアンダースコア _ を追加するか、alt テキストを空にすると、キャプションが非表示になります。
構文
効果
アドモニションブロック
GitHub 構文 > [!TYPE] または三重コロン構文 :::type を使用して、アドモニションブロックを作成できます。note、tip、important、warning、caution の 5 種類がサポートされています。
構文
> [!NOTE]
> 内容を流し読みする場合でも、ユーザーに知ってほしい有益な情報。
> [!TIP]
> タスクをより簡単に完了するために役立つオプション情報。
> [!IMPORTANT]
> ユーザーが成功するために必要な重要な情報。
:::warning
潜在的なリスクがあり、ユーザーの即時の注意を必要とする重要な内容。
:::
:::caution
特定の操作によって生じる可能性のある悪影響について。
:::
:::note[カスタムタイトル]
これはカスタムタイトルの付いた注釈ブロックです。
:::効果
NOTE内容を流し読みする場合でも、ユーザーに知ってほしい有益な情報。
TIPタスクをより簡単に完了するために役立つオプション情報。
IMPORTANTユーザーが成功するために必要な重要な情報。
WARNING潜在的なリスクがあり、ユーザーの即時の注意を必要とする重要な内容。
CAUTION特定の操作によって生じる可能性のある悪影響について。
カスタムタイトルこれはカスタムタイトルの付いた注釈ブロックです。
折りたたみ部分
三重コロン構文 :::fold[title] を使用すると、折りたたみ部分を作成できます。タイトルをクリックすると展開または折りたたむことができます。
構文
:::fold[使用のヒント]
すべての読者が興味を持たない可能性のあるコンテンツは、折りたたみ部分に配置できます。
:::効果
使用のヒント
すべての読者が興味を持たない可能性のあるコンテンツは、折りたたみ部分に配置できます。
ギャラリー
三重コロン構文 :::gallery を使用すると、画像ギャラリーを作成できます。水平スクロールでより多くの画像を閲覧できます。
構文
:::gallery
:::効果
GitHub リポジトリ
二重コロン構文 ::github{repo="owner/repo"} を使用すると、GitHub リポジトリカードを作成できます。ページの読み込み時、GitHub API からリアルタイムでリポジトリの情報が取得されます。
構文
::github{repo="radishzzz/astro-theme-retypeset"}効果
Loading repository data...
動画
二重コロン構文 ::youtube{id="videoId"} を使用すると、動画を埋め込みできます。
構文
::youtube{id="9pP0pIgP2kE"}
::bilibili{id="BV1sK4y1Z7KG"}効果
X ツイート
二重コロン構文 ::tweet{url="tweetUrl"} を使用すると、X ツイートカードを埋め込みできます。
構文
::tweet{url="https://x.com/hachi_08/status/1906456524337123549"}効果
Mermaid 図表
コードブロックで Mermaid 構文を囲み、言語タイプを mermaid として指定することで、Mermaid 図表を作成できます。
構文
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```効果
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;