Proper CSS for tags in Live Preview

I’m looking to give tags the same looks in the Live Preview as they have in Reading.

Things I have tried

.cm-s-obsidian span.cm-hashtag,
.tag {
    color: #999999;
    background-color: #333333;
    border: none;
    padding: 1px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 14px;
}

.cm-s-obsidian span.cm-tag-M,
.tag[href="#M"] {
    background-color: darkred;
    color: lightgray;
}

.cm-s-obsidian span.cm-tag-S,
.tag[href="#S"] {
    background-color: darkorange;
    color: black;
}

.cm-s-obsidian span.cm-tag-C,
.tag[href="#C"] {
    background-color: darkgreen;
    color: lightgray;
}

.cm-s-obsidian span.cm-tag-W,
.tag[href="#W"] {
    background-color: rgba(128, 128, 128, 0.212);
    color: gray;
}

This results in:

Obsidian_preview - Privacy

What I’m trying to do

Actual desired result I’m trying to get to (this is a screenshot of what my reading view looks like, but I want to replicate this in the preview):

Obsidian_reading - Privacy

for tags in editing view (live preview/source mode), you would have to use a different css selector i.e. .cm-s-obsidian span.cm-hashtag-begin { } and .cm-s-obsidian span.cm-hashtag-end { }

/* for background, font color. apply to live preview and reading view */
/* change the span.cm-tag-[label] and href=[tag] accordingly */
.cm-s-obsidian span.cm-tag-S,
.tag[href="#S"] {
	color: ... ;
	background-color: ... ;
}

/* for hash (#) part of the tag in live preview */
/* use it for padding, and border */
.cm-s-obsidian span.cm-hashtag-begin {
	padding-left: ... ;
	border-top-left-radius: ... ;
	border-bottom-left-radius: ... ;
}

/* for the word (after the #) part of the tag in live preview */
/* use it for padding, and border */
.cm-s-obsidian span.cm-hashtag-end {
	padding-right: ... ;
	border-top-right-radius: ... ;
	border-bottom-right-radius: ... ;
}

Thank you so much! Great solution to use those begin and end classes to format the left and right separately

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.