Add support for tags

[argenos]

I love how easy it is to use your plugin to customize things with CSS. Any chance you might add support for tags? I'm adding below some of my (old) snippets just in case they help, not necessarily expecting you to implement or cover all of them!

Here's a sample snippet of what I use (that I then have to repeat over and over for each individual tag I want to customize):

/* Reading view */
.tag[href^="#important"] {
  background-color: #bf616a;
  border: none;
  color: white;
}

/* Live preview mode */
.cm-s-obsidian span.cm-hashtag.cm-tag-important {
  background-color: #bf616a;
  border: none;
  color: white;
}

Because I'm using minimal, my tags are already in the "tag pill" format, but I imagine that different "styles" of tags would be requested by others.

Another nice thing to have would be the ability to add icons/emoji to the tags before/after (although this might be doable with something like supercharged links). My old CSS looked like this (but I imagine whatever you're using for the folder icons would work equally well):

.tag[href^="#ideas"]::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0eb";
}
.tag[href^="#ideas"] {
  background-color: #63A375;
  color: var(--nord1);
}

At some point, I also had a nice CSS that would change the color of the tags on hover, but after the migration to CM6 I did not have time to test/migrate:

/* Tag color in editor mode 
https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/132
*/

/* div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important:before {
  content: '#'; 
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f12a";
} */

span.cm-hashtag.cm-hashtag-end,
span.cm-hashtag.cm-hashtag-begin {
  background-color:var(--nord1);
}

.cm-tag-important, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important {
  background-color: var(--nord11);
  /* border: none; */
  color: white !important;
  /* text-align: center; */
  /* text-decoration: none !important; */
  /* display: inline-block; */
  /* margin: 0px 0px; */
  /* cursor: pointer; */
}

.cm-tag-important:hover {
  color: white;
  background-color: var(--text-accent-hover);
}

Last but not least, on the CSS tricks thread, someone also managed to "move" some tags to the gutter. With the help of pseudometa, this is the snippet that works for me in LP:

.cm-tag-important.cm-formatting::after {
    content: "#important";
    position: absolute;
    font-size: 0.7em;
    left: -70px; /* adjust depending on theme */
    color: white;
    background-color: #bf616a;
}

[ebullient]

oh.. yea! that could be interesting.