Support all five types of GitHub admonitions/alerts

Feature requests
1

Obsidian currently appears to support three different GitHub “admonitions” with their own colors and symbols/icons, for drawing attention to certain parts of a Markdown document. GitHub now supports five different admonition words, and renders them in each in different colors and with different symbols.

These are not part of any Markdown standard, but I’ve found all of GitHub’s five admonitions useful in different circumstances on GitHub for READMEs, Wiki articles and other rendered Markdown areas.

Since Obsidian has supported three of the admonitions so far, it would be nice to update that support to include the newer admonitions (CAUTION and TIP are the newer ones, I believe).

Example of how they are rendered on GitHub now:

admonitions_GitHub
admonitions_GitHub362×545 26 KB

And how they are rendered currently in Obsidian:

admonitions_Obsidian
admonitions_Obsidian522×838 23.4 KB

2

You could potentially customize/create the “missing ones” through CSS :blush: :

3

Thanks, I saw the docs about custom callouts. But I don’t like “customizing” things when I don’t absolutely have to. I just want to see the already existing partial support for three GitHub admonitions in Obsidian expanded to cover all five. So everyone can enjoy using them.

And I like the fact that they would be usable on both GitHub and Obsidian with the same syntax, since I use both.

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
5

Well, once I read the instructions and made the CSS file, it worked. I’ll have to do it in every vault where I want it to take effect though.

Since it wasn’t particularly difficult to implement, I’m sure the Obsidian devs shouldn’t find it a difficult task to integrate something similar natively.

I had to close one note to get it to refresh the colors and symbols completely.

The symbols are slightly smaller than capital letter height in one vault, but slightly larger like your screenshot in another vault. Can’t seem to figure out why. I reset the font choices to defaults (or there were no custom fonts) and reset the theme.

Ah, the base font size setting. It was different between the two vaults. Seems to have a different effect on the text versus the symbols. Or, the symbols have a set size, so they don’t grow or shrink when you change the font size. That seems to be how it works. Wonder if there’s a way to make the symbols more responsive to the text size, since they’re SVG. Probably, but it’s been a long time since I’ve done much with CSS.

Anyway, that was incredibly gracious of you to put that together. Nice job matching the colors and symbols to the GitHub appearance.

Looking at the CSS I’m pretty sure I never could have put that together myself. Not without a lot of help and fiddling around.

1 Like