Tag styling improvements

Yes, I am hoping to have some time over the upcoming Thanksgiving break to work on this. My Idea was to leverage CSS Attribute selectors and add a data-tag-name attribute to the tag so it would work similarly to how admonitions can be styled.

Example:
Tag

// I think this will actually be changing to an <a> tag
// to improve accessability but for this example I will stay with the way it is currently
<span ... data-tag-name="my-tag">#my-tag</span>

This would allow you style all tags or individual tags with something like this:
CSS

// Style for all tags
span[data-tag-name] {
    border: 5px solid limegreen;
}
// Style just the #my-tag tags
span[data-tag-name="my-tag"] {
    background-color: purple;
}

So while not exactly what you were saying, I think it accomplishes much of what you are after.

As far as splitting out the # and the <tag-name> I am not opposed to this but would be interested on hearing what others have to say on that part as it was a bit out of the scope of my intentions. But if I understand you correctly you are looking for something like this:

<span class="sb-hashtag" data-tag-name="my-tag">
    <span class="sb-hashtag-prefix">#</span><span class="sb-hashtag-name">my-tag</span>
</span>
1 Like