Any way to highlight text in HTML tags?

Custom CSS & Theme Design
1

I am trying to highlight text that I have entered in custom HTML, so that any text that has some custom class will be clearly distinguishable on editing screen.

I do not need the specific style of the class applied, it will be enough to display the text that I have enclosed in tags as - say - yellow. Just to indicate that some custom formatting has been applied here.

This is what I tried as an example: anything enclosed in

or :

/* Reading mode: Unspecified HTML tag */
.markdown-preview-view :is(span, div) {
color: #f2f2cc !important;
}

/*Editing mode - unspecified html tag */
span, div{
color: #80ffcb
}

I thought that would do it. But… Practically everything in obsidian is rendered in or

so colored all the text, and the UI.

Is there any way to color just the text that I have enclosed in tags?

Why do I want this

Most of what I write will be read by javascript and rendered as a web page. As I write, I already apply some semantic- and style elements, like <p class="lead>…

for lead paragraph. I would like to see some visual confirmation that the style has been applied.

2

Add new CSS file with something like that:

.customRed {
  color: red;
}

.customYellow {
  color: yellow;
}

And then this:

This is MD
<p class="customRed">This is Red HTML</p>
<p class="customYellow">This is Yellow HTML</p>
This is <span class="customRed">red</span>, and this is <span class="customYellow">yellow</span> with a span for inline text.

… will output this:

image
image405×187 2.55 KB

Cheers, Marko :nerd_face:

5

OK, this one needs a little bit more testing. Markdown is at the end of HTML with tags. But every text starts with <div>, so maybe try …

*:not(div) {
  color: red;
}

This should apply to any tag except DIV. Give it a try.

Cheers, Marko :nerd_face:

10

A custom prefix for your own classes makes a lot of sense. Maybe add a few letters as well, eg juksu_classname. This also helps down the road, when you’re using external libraries. You recognize your own classes at a glance.

For CSS in Obsidian it also helps to narrow down the scope. The difficult part is to find the right selector. For reading view you could try .markdown-reading-view. I find Obsidian’s Developer Tools useful to explore Obsidian’s DOM.