CSS snippets for realistic highlight not rendering in live preview editing view

yixin0829 · September 2, 2023, 2:19pm

What I’m trying to do

I came across a very nice CSS snippet to extend markdown highlight in Obsidian to be more realistic and support multiple colours. (see realistic highlight in Obsidian)

However, currently the realistic highlight styling only display correctly in reading view but not in live preview editing view.

Is there any way that I can make it renders correctly in live preview view as well?

Reading view:

Live preview view:

Source:

You can use colours like (only render in read mode)
- ==Normal markdown highlight== colour
- <mark class="pink">Some of your highlights</mark>
- <mark class="green">Some of your highlights</mark>
- <mark class="blue">Some of your highlights</mark>
- <mark class="red">Some of your highlights</mark>

CSS Snippet:

github.com

deathau/obsidian-snippets/blob/main/realistic-highlight.css

body {
  --fluro-yellow-rgb: 255, 255, 0;
  --fluro-pink-rgb: 255, 0, 255;
  --fluro-purple-rgb: 200, 0, 255;
  --fluro-coral-rgb: 240, 128, 128;
  --fluro-blue-rgb: 0, 255, 255;
  --fluro-green-rgb: 0, 255, 0;
  --text-highlight-rgb: var(--fluro-yellow-rgb);
}

mark.yellow {
  --text-highlight-rgb: var(--fluro-yellow-rgb);
}
mark.purple {
  --text-highlight-rgb: var(--fluro-purple-rgb);
}
mark.blue {
  --text-highlight-rgb: var(--fluro-blue-rgb);
}
mark.green {

This file has been truncated. show original

Things I have tried

I initial thought was that HTML tag <mark> conflicted with the custom CSS snippet so I changed <mark> to use <span> instead. Still no success.

I’m not super good at CSS any help would be appreciated!

system · December 1, 2023, 2:20pm

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.