#1

Hi, I’m still not that familiar with CSS, but here’s what I’d like to do: I want to add something to the CSS so that if I prefix a word with a particular character, I’d like that word, whatever it is, to show up in a distinct color–similar to the way that tags get highlighted, so that, for example, in

blah blah blah @function blah blah blah @structure blah

I could put something in the CSS where @function and @structure are both offset in blue. It doesn’t really matter to me what the symbol is.

#2

This would work for #, and it could work if you created links around each of these phrases (without using an actual link), but it can’t work for any arbitrary character. The reason is because Obsidian’s Markdown parser adds HTML classes to #-tagged words, and you can use CSS to target links containing certain characters.

See e.g., Meta Post - Common CSS Hacks

#3

Got it, thanks.

I did discover accidentally that :text: will be offset in a different color in Edit. I found out that that’s the syntax for rendering emojis in markdown, which (fortunately) doesn’t seem to be enabled in Obsidian.

1 Like
#4

Was able to specify the color with

.cm-s-obsidian span.cm-formatting.cm-formatting-emoji.cm-builtin {
color: #XXXX;
}

(Edit only; don’t know how/if it can be applied to Preview)

1 Like
#5

Ha, nice. I was going to suggest emoji but wasn’t sure it was super-future proofed… but I suppose it’s only a risk if you use terms that could be emoji? :man_shrugging:

1 Like