Blockquotes with different border/background colors

Help
1

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

image
image1087×314 7.57 KB

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

2 Likes
2

I’ve been experimenting with using HTML. Add the following to your CSS snippets file:

blockquote.red { border-color:#f00; background-color:#f001; }
blockquote.green { border-color:#0f0; background-color:#0f01; }
blockquote.blue { 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; }
blockquote.pink { border-color:#f9f; background-color:#f9f1; }

Then in your text:

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

image


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 span.cm-tag{ display: none; }
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-attribute{ display: none; }
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string{ 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.

2 Likes
3

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

2 Likes
4

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

1 Like