Blockquotes with different border/background colors

Hi, How can I get the multiple blockquotes with different background/border color for different occasions like marking something as “info” or “warning”. Something similar to this

Or, if not blockquote then some other way to achieve this?


I’ve been experimenting with using HTML. Add the following to your CSS snippets file: { border-color:#f00; background-color:#f001; } { border-color:#0f0; background-color:#0f01; } { border-color:#00f; background-color:#00f1; }
blockquote.magenta { border-color:#f0f; background-color:#f0f1; }
blockquote.cyan { border-color:#0ff; background-color:#0ff1; }
blockquote.yellow { border-color:#ff0; background-color:#ff01; } { border-color:#f9f; background-color:#f9f1; }

Then in your text:

<blockquote class="green">
Well done is better than well said. — Benjamin Franklin


Unfortunately, this leaves the editor text a bit cluttered. A partial workaround is to hide most of the HTML. At the moment I can hide everything except the equals sign (after “class”).

div:not(.CodeMirror-activeline) > .CodeMirror-line{ display: none; }
div:not(.CodeMirror-activeline) > .CodeMirror-line{ display: none; }
div:not(.CodeMirror-activeline) > .CodeMirror-line{ display: none; }

This hides the HTML unless the line is selected. And leaving the equals sign does give an indication that something is there.

Edit: I notice now that you can’t use markdown within HTML. So you’d have to use even more HTML for bold, italics, etc.


@rpathak You may want to check out @valentine.195 's obsidian-admonition plugin.


Obsidian-admonition is very nice but the internal links inside them [[ … ]] don’t appear in the graph view. Probably I’m doing something wrong.