Support all five types of GitHub admonitions/alerts

Feature requests
4

Well, as you already saw, the “missing ones” already exist… They’re just aliases for another type of callout (so they’re displayed/rendered following the CSS of that “parent” type) :blush: …

And while I understand the “not wanting to customise things unless absolutely necessary” bit, how these “missing” callouts are rendered/displayed within Live Preview/Reading doesn’t take much customisation to get the desired result (or a closer one) within minutes :innocent: .

It absolutely won’t change the raw markdown syntax of the callouts… just de-aliasing/separate them from their “parent type” so they can be rendered in a distinctive fashion, somewhat like on GitHub (at least when it comes to the color and/or icon).

GitHub like callouts
GitHub like callouts1396×1534 111 KB

Raw markdown used for the screenshot above:

> [!CAUTION]
> Syntax `> [!CAUTION]`

> [!WARNING]
> Syntax `> [!WARNING]`

> [!IMPORTANT]
> Syntax `> [!IMPORTANT]`

> [!NOTE]
> Syntax `> [!NOTE]`

> [!TIP]
> Syntax `> [!TIP]`

… and just in case, here’s the CSS snippet I wrote to get the icons and colors (based on the GitHub callouts you shared in your screenshot) :blush: :

/* Bypassing the "svg fill none" bug for icons */
.callout[data-callout="caution"],
.callout[data-callout="important"] {
  & > .callout-title {
        & svg {
            fill: none;
        }
    }
}

/* Overriding Obsidian's callouts */
.callout[data-callout="caution"] {
    --callout-color: 220, 89, 81;
    --callout-icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>;
}

.callout[data-callout="important"] {
    --callout-color: 137, 101, 203;
    --callout-icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>;
}

.callout[data-callout="note"] {
    --callout-color: 76, 150, 214;
    --callout-icon: lucide-alert-circle;
}

.callout[data-callout="tip"] {
    --callout-color: 102, 175, 100;
    --callout-icon: lucide-lightbulb;
}
2 Likes