こちらは、VScode 拡張の Markdown Preview Enhanced では GitHub Flavored Markdown の Alerts が表示できなかったので、それっぽく表示できるようにするってエントリです。

方針

MPE は MkDocs の Admonitions 記法に対応しているようなので、GFM Alerts を MkDocs Admonitions に変換する方針とします。

つまり、

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

これを

!!! note
    Useful information that users should know, even when skimming content.

!!! tip
    Helpful advice for doing things better or more easily.

!!! info Important
    Key information users need to know to achieve their goal.

!!! warning
    Urgent info that needs immediate user attention to avoid problems.

!!! danger Caution
    Advises about risks or negative outcomes of certain actions.

こうする。

コード

適用

VSCodeのコマンドパレットから「Markdown Preview Enhanced: Extend Parser (Global)」を選択し、 開いた parser.js に上記のコードをコピペする。
以降は「Markdown Preview Enhanced: Open Preview」でGFM Alertsが表示されるようになる。はず。

※ CSSは弄ってないので、 MkDocs Admonitions のスタイルままです。

参考