Many thanks for posting that short vid. Unfortunately, when I open Cmd+Option+I, and upon selecting an element, the console does not show the 2 long columns that yours does.
I will leave this issue as it is because I will not try to resolve it right now seeing it is not something I can easily do.
I had the same issue with the white background on the text and it was caused by the theme I was using setting the background colour on code blocks like this:
.theme-light code[class*="language-"], .theme-light pre[class*="language-"],
.theme-dark code[class*="language-"], .theme-dark pre[class*="language-"] {
white-space: pre-wrap;
background-color: var(--code-block-background);
margin-bottom: 3em;
}
You could just remove the “background-color” line from that block but that made all my code block have grey backgrounds which I didn’t like.
Instead, try using the following css:
.app-container pre[class*="language-note-"] {
border: 1px solid;
}
/* Make the first line of note bold */
*[class*="language-note"]::first-line {
font-weight: bold;
}
.app-container pre[class*="language-note-"] code[class*="language-note-"] {
color: black;
white-space: pre-wrap;
font-family: var(--font-family-preview);
font-size: var(--font-size-normal);
}
.app-container pre[class*="language-note-danger"], code[class*="language-note-danger"] {
border-color: #bb0101;
background-color: #f3bcbc !important;
}
.app-container pre.language-note-info, code[class*="language-note-info"] {
border-color: #3c78b5;
background-color: #d8e4f1 !important;
}
.app-container pre.language-note-warn, code[class*="language-note-warn"] {
border-color: #f0c000;
background-color: #ffffce !important;
}
.app-container pre.language-note-success, code[class*="language-note-success"] {
border-color: #009900;
background-color: #ddffdd !important;
}
.app-container pre.language-note-notice, code[class*="language-note-notice"] {
border-color: #cccccc;
background-color: #f3f3f3 !important;
}
@Keithm999: yep, that works fine. Many thanks for your help.
1 other question: would it be possible to search for a note on the basis of its colour? If so, what syntax should one use?
As far as I can tell - no, but my Obsidian kung-fu is very weak. You probably would be better off asking “is it possible to find all code blocks of specific language?” in a separate post.
Well, I am happy to tell you that I can give something in return for your idea of these coloured pages.
If you search for e.g. note-danger, or any of the other language expressions, Obsidian will find the note. That occurred to me in the middle of the night. 
Great, thank you! 
Doesn’t using a code block limit many formatting possibilities?
I’m tinkering with HTML using block quotes for this use-case.
@NilsHempelof course it does, but what @mklepaczewski proposes is just a visual way to draw attention to a certain aspect of a note.
Another way to flag a particular aspect is to use a #tag.
An example of this in use with an actively developed wiki would be the color codes on Super Memo Guru
Another, somewhat easier way of achieving a coloured paragraph is putting inline <p style="color:white;background-color:green">a paragraph of text text</p>.
I had no idea you could just insert HTML like this! Works beautifully. I’ve made a couple of Keyboard Maestro macros which wraps selected texts, to give it the background.
You should put that in the Share & showcase forum.
Just to link threads in the forum, I point out that there is already an admonition plugin request here
Awesome, thanks!
My take on @mklepaczewski great notice blocks css, with the addition of pulsating gutter markers that can be used together or separately.
Usage in a note:
```bullet-pulse-red
```
```note-red
RED
```
A gist of the CSS can be found here gist
I tried your CSS snippet but the text in the box has white shading.
I use the default light theme and Obsidian 0.11.0.
Could you help me avoid this?
i would agree, asciidoc would be necessary.
But for the solit here: why not use ‘note’ or ‘warning’ for the css names?
Obsidian’s internal feature seems enough for me. I tried embed link to heading, combined with emoji icon.
![[foo#
tip1]]
file foo.md placing notice blocks.
##
here’s my tip.
Here’s some notice example
Better comprehension to the text.
Note
A simple summary.
Important
Don’t forget to Do sth.
Caution
Don’t do that!
Warning
Dangerous operation!!
Hi Guys,
by now, there are callouts in obsidian wich you can use like this :
> [!INFO]
> Here's a callout block.
More informations : Use callouts - Obsidian Help