CSS for Tags in Reading Mode

Hello,

While looking for a CSS that would allow me to edit the tags in Reading Mode and Live Preview, I found the following code.

/* Block ID -  */
.markdown-source-view.mod-cm6.is-live-preview .cm-blockid  {
	font-size: 0.4em; /* Reduz o tamanho da fonte (ajuste conforme necessário) */
    opacity: 0.2;
}



/* 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="#"] {
    font-size: 0.4em;
    opacity: 0.2;
}


/* for hash (#) part of the tag in live preview */
/* use it for padding, and border */
.cm-s-obsidian span.cm-hashtag-begin {
    font-size: 0.4em;
    opacity: 0.2;
}

/* 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 {
    font-size: 0.4em;
    opacity: 0.2;
}

However, it didn’t work in Reading Mode (only in Live Preview).

Could someone help me?

Your issue is this part. This is looking for an object with the class ‘tag’ and a href attribute of ‘#’, nothing more and nothing less.

Update this to:
.tag[href^="#"]

This will instead match anything where the href starts with ‘#’, i.e your tags in reading view

2 Likes

Thank you, Wolf. It worked!

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