このガイドでは、記事を分かりやすく見せるために、このブログの Markdown で Admonition とディレクティブを使う方法を説明します。

インラインディレクティブ :name[label]{attributes}

インラインディレクティブを使うと、文章の一部に特別な書式や機能を追加できます。 よくある用途の 1 つは、キーボードショートカットや UI 要素を表すボタンの作成です。

:btn[cmd], :btn[shift], :btn[ctrl], :btn[opt], :btn[enter],
:btn[left], :btn[right], :btn[up], :btn[down], :btn[tab],
:btn[space], :btn[delete], :btn[esc], :btn[custom]

別の例として、文章中に YouTube へのリンクを埋め込めます。

YouTube で動画を見る：:youtube[ここをクリック]{#dQw4w9WgXcQ}

ブロックディレクティブ ::name[label]{attributes}

YouTube 埋め込み

ブロックディレクティブを使うと、YouTube 動画を独立したブロックとして埋め込めます。

::youtube[この動画を見る]{#dQw4w9WgXcQ}

アートブロック

装飾用の SVG パターンを埋め込む ::art ディレクティブもあります。記事に視覚的なアクセントを加えられます。

::art{type="wave" color="blue"}

GitHub からコードを読み込む

github-code ディレクティブに GitHub の blob URL を指定します。記事の表示時にコードが取得され、通常のコードブロックと同じシンタックスハイライト、コピーボタン、任意の行番号が適用されます。title を省略すると、ファイル名がタイトルとして使われます。

::github-code{url="https://github.com/kkensuke/pages/blob/main/next.config.js" title="next.config.js" language="javascript" showLineNumbers=true lines="2-8"}

2const nextConfig = {
3  reactStrictMode: true,
4  swcMinify: true,
5  i18n: {
6    locales: ["en", "ja"],
7    defaultLocale: "en",
8  },

リンクカード

:::linkcard
https://www.google.com/
:::

Admonition

Admonition は、重要な情報を目立たせるための特別な書式を持つコンテンツブロックです。

基本構文

:::type
ここに内容を書きます
:::

使用できる種類

:::note
これは note の Admonition です。
:::

独自タイトル

:::note{title="知っていましたか？"}
どの Admonition にも独自のタイトルを設定できます。
:::

Admonition の入れ子

開始タグと終了タグのコロンを増やすと、Admonition を入れ子にできます。

使用上のポイント

1. 文章の流れに含まれる要素にはインラインディレクティブ（:）を使います。
2. 埋め込みなどの独立した要素にはブロックディレクティブ（::）を使います。
3. 内容に合った Admonition の種類を選びます。
4. Admonition には、内容が分かる明確なタイトルを付けます。
5. Admonition を使いすぎず、本当に重要な情報を強調するために使います。