Notation Color Blocks Only Works with Legacy Editor

[tjex]

Notation color blocks don't render when using the live preview, they just stay as code blocks.
Only when using the legacy editor and toggling preview mode do they render.
Tested using minimal theme 5.2 and notation-color-blocks as of commit d8caed4

[Yehuda-Bergstein]

Hi! did you find a solution when not using the legacy editor?

[tjex]

not a direct solution to use this snipped. I stopped using it and instead have just been marking with obsidian's highlights (==highlight==) or the diff code.

+ this is blue
- this is red

[Yehuda-Bergstein]

Cool, thanks
How do I use the "+, -" ?
And how do you change the color of the text?

[tjex]

you need to write a code block with the "language type" as diff

As below:

whatever text you have on a line starting with + will be blue, and red with -

[Yehuda-Bergstein]

Thanks!

you need to write a code block with the "language type" as diff

As below:

whatever text you have on a line starting with + will be blue, and red with -

[NiklasWitzel]

It is not possible to get back the old functionality in the live preview with only CSS snippets. Below is a markdown example and the HTML output that is generated in the live preview window:

```note-gray-background
xxx
```

which gets translated into:

<div class="HyperMD-codeblock HyperMD-codeblock-begin HyperMD-codeblock-begin-bg HyperMD-codeblock-bg cm-line" dir="ltr">
    <img class="cm-widgetBuffer" aria-hidden="true" />
    <span contenteditable="false"></span>
    <img class="cm-widgetBuffer" aria-hidden="true" />
    <span class="code-block-flair" aria-label="Copy" contenteditable="false">note-gray-background</span>
    <img class="cm-widgetBuffer" aria-hidden="true" />
</div>
<div class="HyperMD-codeblock HyperMD-codeblock-bg cm-line" dir="ltr">
    <span class="cm-hmd-codeblock" spellcheck="false">xxx</span>
</div>
<div class="HyperMD-codeblock HyperMD-codeblock-bg HyperMD-codeblock-end HyperMD-codeblock-end-bg cm-line" dir="ltr">
    <img class="cm-widgetBuffer" aria-hidden="true" />
    <span contenteditable="false"></span>
    <img class="cm-widgetBuffer" aria-hidden="true" />
</div>

It is not possible to style an element based on its innerHTML/content.

But I just found the Admonition plugin, which looks like what I was looking for. Or you could use the built-in Callouts (which I also just found).