Note-level custom HTML/CSS classes

I would like to set HTML classes at the note-level to be able to style notes differently with custom CSS. For example, I would have different background colors for certain note types to easily identify them when I’m using multiple panes. A more advanced feature (probably for a plugin) would be to use note metadata as HTML/CSS classes.

9 Likes

Thinking more about this - a more specific solution would be to add any tags in a note as classes to .workspace-leaf .view-content.

It’s a good idea but maybe it’s too much for a .md file. :sweat_smile:

A color category like this topic mentioned could be a compromise。

Another issue is whether you’d want those styles being printed, or whether they’d only be for screen display.

It wouldn’t be in the markdown file. The custom classes would simply be rendered in preview mode.

That’s a completely separate issue in my mind. Wouldn’t that question apply to any styling?

Yes, but standard WP practice is that you have print set up unaffected by themes. CSS is the whole spec. Reasonable when the idea is publish to the web, but not necessarily when you’re publishing to a PDF or print. Not an issue for me personally since my publish formatting is always a completely separate process, but could be for some.

@Dor My feature request has nothing to do with printing or exporting notes. I simply want to be able to style notes according to tags because I use tags for “note types”, for example with different background colors. This is so when I have many notes open, it will be easier to distinguish between my daily notes vs literature notes vs meeting notes, etc.

That wasn’t clear in the original post.