はてなブログで GitHub のアラート記法を再現した

GitHub にはアラート記法という非常に便利な記法が存在します。

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

のように書くと、以下のように表示されます。

github.com

このアラート記法をはてなブログで再現してみました。

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

どうでしょうか？いい感じでしょう？？

実装方法

はてなブログ側では [!NOTE] といった特殊記法を実装する場合、jsを作って読み込む必要があります。今回は少し面倒くさかったので引用内に p タグを用意することで実現しました。

> <p class="note">Note</p>
> Highlights information that users should take into account, even when skimming.

> <p class="tip">Tip</p>
> Optional information to help a user be more successful.

> <p class="important">Important</p>
> Crucial information necessary for users to succeed.

> <p class="warning">Warning</p>
> Critical content demanding immediate user attention due to potential risks.

> <p class="caution">Caution</p>
> Negative potential consequences of an action.

これらの pタグのクラスによってスタイルを出し分けています。引用の左バーは :has を使って色を変えています。

&:has(p.note)::before {
    background-color: $blockquote-color-note;
}

また、アイコンは SVG を base64 に変換して mask-image で描画しています。mask を使うのは色を変更するためです。

p.note {
    &::before {
        content: "";
        width: 1rem;
        height: 1rem;
        padding-right: .5rem;
        display:  inline-block;
        mask-size: 1.5cap;
        mask-repeat: no-repeat;
        mask-image: url($blockquote-image-note);
        background-color: $blockquote-color-note;
    }
    color: $blockquote-color-note;
}

SCSS 公開しています

ご自由にどうぞ。

github.com