GitHub-style callouts ("Alerts") in plugin README previews not displayed properly in the Community Plugin catalogue

[alythobani]

Steps to reproduce

1. Enable Community Plugins, and browse the catalogue
2. Search for a plugin whose README contains any GitHub “alerts”: e.g. Badges (uses IMPORTANT), Callout Suggestions (uses WARNING), PDF++ (uses NOTE and WARNING), File Tree Generator (uses NOTE), Callout Toggles (uses TIP and IMPORTANT)
3. Click on the chosen plugin to view its README preview; notice that the alerts are not displayed properly

Did you follow the troubleshooting guide? [Y/N]

Yes, and this is reproducible in a sandbox vault

Expected result

Alerts are displayed properly with appropriate icons and colors, ideally aligned with the colors and icons GitHub uses.

Here is how they’re displayed in the GitHub repos:

Badges

PDF++

Callout Toggles

Actual result

Alerts are incorrectly displayed, with no icons, and misaligned colors (e.g. TIP and IMPORTANT have the same light blue color):

Badges

(IMPORTANT alert should be purple and show icon)

PDF++

(Correct colors but no icons)

Callout Toggles

(TIP alert should be green)

Environment

SYSTEM INFO:
Obsidian version: v1.7.6
Installer version: v1.5.12
Operating system: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000 21.6.0
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 0
Plugins enabled: 0

RECOMMENDATIONS:
none

---

Additional information

Here’s the GitHub page on Alerts: Basic writing and formatting syntax - GitHub Docs - Alerts

As far as I know there are only these five alert types to implement accurate rendering for:

Hope the above info is useful / let me know if I can provide anything else

[Pch]

From my quick tests (because I got curious ), if you use a CSS snippet to de-alias/add the “missing” GitHub callouts in Obsidian, Obsidian will render the callouts in that modal as you would like them to… At least, for the colors … I sadly couldn’t make it work for the icon …

If I enable the CSS snippet I shared in this feature request → Support all five types of GitHub admonitions/alerts - #4 by Pch (which could be updated, now that Obsidian uses a more recent version of the Lucide icon library) … and then look for the plugin Badges, for example, in the Community plugins store, I get the following Important callout rendered:

… as opposed to this rendering, when the CSS snippet is disabled :

I really have no clue for the missing icon though (I’m no CSS magician ) … and I didn’t had the opportunity to dig into this further