このガイドでは、記事を分かりやすく見せるために、このブログの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を使いすぎず、本当に重要な情報を強調するために使います。