I’ve written an add-on for the Thunderbird email client that clips email into Obsidian. As part of that I am importing Thunderbird tags as Obsidian tags. So, if you have the “Personal” and “Important” tags on an email the inserted note can have #Personal and #Important markup injected.
I have a feature to add color to given tags using HTML such as <font style="color:green"> #email </font> so the color of the Obsidian tag matches the color of the tag used in Thunderbird. In edit mode, the color appears but unfortunately the tag is not recognized by Obsidian - clicking on it does not start a search on that tag. I’ve played around with different types of HTML tags (DIV, SPAN, MARK, etc), the spacing inside and outside the HTML, and tried different markup formats like lists to see what the effects are. It appears that Obsidian can’t parse markup within HTML. In read mode, the HTML is simply not parsed and the tags can be clicked, but the HTML color is not rendered.
Question 1: Is there a way (editor setting, markup format, etc) that will allow markup inside HTML to be parsed?
Question 2: Is there a way to change the color of text without enclosing it in HTML? Something in markup or playing with CSS?
Things I have tried
Searched forum and web on various combinations of HTML, tag, and markup. Also experimented changing parameters of the HTML and markup as described above.
This is a quirk of Live Preview. If you switch to Reading View (which renders more accurately), you’ll see that tag working. You can also use the tag: operator to verify that Obsidian has indexed the tag.
You might post a feature request to make Live Preview recognize tags inside inline HTML, if a request doesn’t already exist. (Markdown only works in inline HTML, so altho hashtags aren’t Markdown I wouldn’t expect them to work in HTML blocks in Obsidian).
(Also, this doesn’t really matter for your notes but font is a deprecated HTML element; I’d use span.)
OK. Looking at it in Reading view does give me the markdown tags, but the HTML color change doesn’t work. It seems that the outer HTML is overridden by the tag’s CSS value. For example <span style="color:#ff0080;"> #ObsidianClipperTest (this is not tag text)</span> shows the “(this is not tag text)” in the intended color but the actual “#ObsidianClipperTest” as the usual blue text with a cartouche outline that changes when I mouseover - classic CSS behavior.
Looking at the element in the developer console I see the span show up as class “span” and then the tag itself show up as class “a.tag”
I’m not really a CSS guru. Any way to tell the editor “hey, don’t override the stuff inside this SPAN?”
This is doable, although a chore if you have a lot of tags that you want to change. You can get rid of the border sections if you just want the color. Just an example of what you can do.
This version from FireIsGood is a bit easier if you are doing multiple tags — you just need to change the tag colors parts at the bottom — but it’s still one-by-one.
Also, keep in mind that tags are case-sensitive; you may want to add [href="#Important"], [href="#important"], etc., to the rules. I was staring at it for a few seconds, wondering why it wasn’t working, before I realized my tag in the note was #important.
Are those tags a given set of tags? Would it be a possibility to add a CSS snippet to automatically color all of those tags to the predefined set of colors?
Yeah, if there’s only a handful of them and this is eventually for a plugin, you may be able to include a set of rules in the plugin’s styles.css file.
Including an i before the ] in a CSS attribute selector causes the attribute value to be matched in an ASCII-case-insensitive manner. For example, [b="xyz" i] would match both <a b="xyz"> and <a b="XYZ">.
My naive suggestion for that would be the more specific span > a.tag (which targets an a.tag directly inside a span). If there’s anything between them in the hierarchy, then span a.tag. I don’t know for sure if either of those will do it, but the general idea is to target more specifically.
Thank you all for helping me out on this. I really appreciate it!
Just to be clear: It seems the only way to modify the CSS like this is through mechanisms where the CSS is not embedded in the note (the CSS snippets editor or editing an CSS file or the like). Is that correct? There isn’t a way to embed the CSS itself in the note and have it act on that note to override the default CSS to clor may tags, correct?
I know I could add a CSSCLASS to the YAML front matter to reference a snippet, but that isn’t a whole solution as the user would need to manually add a CSS snippet into their Obsidian the my clipped, generated note would reference. If that’s the case maybe I could add instructions to a user on how to modify their CSS, but I’m not entirely sure it would be worth it for the users for this relatively minor feature.
I mentioned briefly above, but many plugins include a styles.css that loads along with the main.js and manifest.json files that sets styles relating to the plugin. You may be able to add a few specific tag colors in the styles.css with a brief explanation of how to make a custom snippet if the user wants to override the default tag colors set there.
Not defining any custom tag colors and suggesting another plugin for custom tags (if desired by users) is also an option, as Cawlin mentioned.
