How can I set up CSS classes feature for the Highlightr-Plugin?

[Ralf_Reddings]

I am asking about the Highlightr-Plugin, it mentions instead of declaring everything inline, you can store the CSS settings in CSS class:

Version 1.1.2 adds the ability to choose between inline CSS and CSS classes. This will create a new stylesheet that will how all of your highlight colors. Each class is named hltr-${highlight_title_here} and are generated from the titles by which you have named your highlights

I would much prefer this instead of having inline CSS all over my markdown file but I dont know how to set this up and the plug in does not go into detail on how to do this.

I am thinking, I need to create a .css file but place it where?
I have a background in Python/cpp. Web dev is not my area at all. If anyone has any ideas on how to do this, I would appreciate it.

windows11, latest obsidian and highlightr.

[ariehen]

You create a .css file, it can be named anything, e.g. highlightr.css and you put any snippets in there.

https://help.obsidian.md/Extending+Obsidian/CSS+snippets

---

As for the plugin, once it’s installed it looks like you change this setting to css-classes:

and when highlighting some text (in this case purple),

It ends up being this mark class:

which points to this CSS with a quick look:

.hltr-purple, mark.hltr-purple, .markdown-preview-view mark.hltr-purple {
    background: #D2B3FFA6;
}

Using !important is generally frowned up, but you could use one here to override the plugin’s default color. e.g.

 .hltr-purple, mark.hltr-purple, .markdown-preview-view mark.hltr-purple {
    background: #BB85AB !important;
}

Hopefully someone more familiar with the plugin can offer a solution without using !important.

Moved to the custom CSS category.

---

edit: Forgot to mention that any custom colors you make would work the same.

and you could override it with:

.hltr-xyz, mark.hltr-xyz, .markdown-preview-view mark.hltr-xyz {
    background: hotpink !important;
}