零弐壱蜂

GitHubのMarkdownで使えるアラート構文（NOTE・IMPORTANT・WARNING・TIP・CAUTION）

4 min read
hiroweb developer

概要

GitHubのMarkdown拡張機能として、アラート用（重要な情報を強調するため）の引用ブロックが使えるようになった。各ラベルによって、異なる色とアイコンで表示される。

記述方法

アラートは[!NOTE]・[!IMPORTANT]・[!WARNING]・[!TIP]・[!CAUTION]の5種類が利用でき、以下のような記述で利用できる。

Note

2023/11/14のアップデートで[!TIP]・[!CAUTION]の2つが追加された。
また、デザイン（余白感）もやや変更されている。

記述：

> [!NOTE]
> Highlights information that users should take into account, even when skimming.
> _読み飛ばす場合でも、ユーザーが考慮すべき情報を強調する。_

> [!IMPORTANT]
> Crucial information necessary for users to succeed.
> _ユーザーが成功するために必要な重要な情報。_

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
> _潜在的な危険性があるため、ユーザーが直ちに注意を払う必要がある重要な内容。_

> [!TIP]
> Optional information to help a user be more successful.
> _ユーザーがより成功するためのオプションの情報。_

> [!CAUTION]
> Negative potential consequences of an action.
> _行動の潜在的な否定的な結果。_

特殊なブロッククオート行となっており、先頭に[!NOTE]・[!IMPORTANT]・[!WARNING]・[!TIP]・[!CAUTION]を記述することで色とアイコンが通常の引用ブロックとは異なる表示になる。

非推奨となっていた`**NOTE**`シンタックスは2023/11/14のアップデートで削除された。

ベータテスト期間中は[!NOTE]というシンタックスではなく、**NOTE**というシンタックスで利用できたが、現在ベータテスト期間中の記法は非推奨となっているため注意（**NOTE**だと意図せぬ表示になる可能性があるためだと思われる）。

以下のような記述で同様の表示になっており、執筆現在も利用できるが非推奨となっているため、今後は利用しない方が良い。

> **NOTE**
> Highlights information that users should take into account, even when skimming.
> _読み飛ばす場合でも、ユーザーが考慮すべき情報を強調する。_

プレビュー：

GitHubのアラート構文のプレビュー時の表示

出力結果のHTML：

「ブロッククオート構文の拡張」と公式のドキュメントに記載はあるが、出力結果はdivとなっている。もともとはblockquoteで出力されていたが、2023/7/21のアップデートでdivに変更された。

<div class="markdown-alert markdown-alert-note" dir="auto">
  <p dir="auto">
    <span class="color-fg-accent text-semibold d-inline-flex flex-items-center mb-1">
      <svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>
    Note</span>
  </p>
</div>

参考