Hi, I’ve been using tags in Obsidian frequently but never enjoyed the pill shapes or the preceding hashtags as they always affect the flow/readability of text.
Below is the best CSS solution I could come up with
Tags will appear as normal bold text (change the color from your theme settings) with a wavy underline to differentiate them from normal bold text or straight underlined links.
Sadly hashtags appear on reader mode, but I rarely use it as editor mode is the default one I use 99% of time.
CSS snippet:
.cm-hashtag, a.tag {
font-weight: 700 !important;
text-decoration: underline;
text-decoration-style: wavy;
line-height: 0.5em !important;
margin-top: -10px !important;
display: inline-block;
height: 0 !important ;
background: none !important;
border: 0 !important;
padding: 0 !important;
}
.cm-hashtag-begin{
display:none;
}
3 Likes
Here’s what I use — it makes tags look the same as links except without the underline.
/* Remove tag pills.
Customized from original at https://forum.obsidian.md/t/previous-tag-format/45587/2
*/
/*
TODO:
- Change color to accent.
- Add underline?
*/
body{
--tag-size: ;
/*--tag-color: var(--color-base-100);*/
/*--tag-color-hover: var(--color-base-100);*/
--tag-decoration: underline;
--tag-decoration-hover: underline;
--tag-background: var(--color-base-00);
--tag-background-hover: var(--color-base-00);
--tag-border-color: var(--color-base-00);
--tag-border-color-hover: var(--color-base-00);
--tag-border-width: 0px;
--tag-padding-x: 0em;
--tag-padding-y: 0em;
--tag-radius: 0em;
}
1 Like
Thank you. I like this a lot. Nice job.
Imma go hit up the Discord, see if any of the CSS magicians have a solution to the ‘Reading View’ issue.
@zam came up with a solution over on the Discord (#apperance) - Discord
It uses a font with an invisible #hashtag! Genius.
1 Like
Wow! A true genius! I have relatively good skills in css and thought this is impossible to achieve without javascript! That invisible font solution is something extraordinary
