I would like suggest to add possibility to style the number sign (#) itself too in order to, e.g., hide it or replace it using CSS.
The primary reason for this is that I tend to write #<hash tag>s as
a part of a #text as you see in this paragraph. Re-styling to #something
less intrusive is therefor needed.
The second improvement I would like to suggest is to add some extra attribute to tags containing the tags’ names so that they could be matched in CSS and styled differently. If having this I could change style for any tag based on it’s name which would be great, especially when having all the attribute selection possibilities at hand.
I’ve had it in my backlog to try and implement some of this as mentioned here. Just been super busy lately but I’ll try to get into it in the next few weeks or so.
@terr-steak Are you still planning to implement it? If true, could you please take into account both syntaxes for the hash tags? Ideas:
#single-word-tag (enclose # in extra CSS class, e.g. .tag_sign - to be rather general, because once implemented, we could even change it for something else than the number sign using pure CSS)
#<any long tag text> (enclose # in extra CSS class and the < and > in another extra CSS classes (perhaps .tag_text_{open,close} or something alike)
so that we had full control of the look and feel of the tags in either form.
Sidenote: It would be also nice to have better access to attribute syntax elements [ and ], <name>, : and <value> (for example, I would certainly hide the brackets myself to not disturb me while reading).
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:
This can be an example how it looks like now #<my tag> and with the above classes it could look like any other tag: #my tag. This also yield another question: should the # and the < and > characters be part of the clickable link or should it rather be like this: #<my tag>? What do you think? I am talking about visual part of the <a/>s, not about the URL in href.
I do not know SB internals good-enough (yet), but all of this is for the case when the caret is outside of the element (not editing it). I suppose there are 2 stylings, one for “view” (not editing the element) and one for “edit” (editing, caret is inside, similarly to, e.g., headers). How does this work, in fact, in SB? Can this be clarified to me, please?
I have most of the basic functionality implemented for this and will get a pull request submitted later tonight. It did not address your idea of targeting the brackets but will keep looking into this.
As far as handling the editing and rendering, I am still working on understanding that as well. It is handled by the CodeMirror editor and the markdown plugin as well as some customizations specifically for SilverBullet. I will link to my PR once submitted so that you can see the code I added to implement what I have done if that interests you.
tag>