[Improvement] Same tag highlight in edit and reading view

[vii33]

Hi, I love your theme. Thanks a lot for creating it! 🤩

I have one question, though: Is there a reason why tags aren't visualized the same in the edit and reading view?

Example: Left: Edit view, Right: Reading view

I really like the "taggish" styling in the reading view so I updated the CSS in the edit view -> Same look:

---

Code:

/* ----------------------------------------------------------------------------------- */
/* STYLING OF TAGS */

span.cm-hashtag {
  color: var(--text-tag) !important;
  background-color: var(--background-secondary-alt);
  text-decoration: none !important;
  padding: 2px 0px 2px 0px;
}

span.cm-formatting-hashtag {
  padding: 3px 0px 2px 4px;
  border-radius: 4px 0px 0px 4px;  /* left radiuses */
}

span.cm-hashtag-end {
    padding: 2px 4px 2px 0px;
    border-radius: 0px 4px 4px 0px; /* right radiuses */
}

/* ----------------------------------------------------------------------------------- */
/*  Special styling for certain tag words (optional). Suffix the tag name, e.g. "todo" */

span.cm-tag-todo {
  color: #080808 !important;
  background: #d6ae5e; 
}

Remarks for others interested:

• Tags constists out of several segments, so padding has to be done in multiple elements
• Due to multiple segments border radiuses have to be applied only in start and end element
• Special tags can be styled quite easily with own css classes (here the #todo example)
• The hashtag is somehow rendered 1 pixel too low -> Hashtag color box has an offset (see image below). Solution: Either use a mathematically correct top-padding distance or use a perfect screen-padding. In above example the 3px in the formatting-hashtag for screen-perfect (instead of 2px like other top-paddings).

Offset bug:

[insanum]

This was a good idea and I've implemented it. :-)