# Coloring Text with minimal hidden letters that enlarge your text size. CSS Snippet

Hi guys i replied to the original thread however the last reply was february 21.

I changed this css snippet so that you only have to type "#+(1 or 2 letters)+* OR _ OR == to start coloring text. Till now this only works for italics, bold, highlight and strikethrough not letting the text stay normal while just adding color. Yes i know about all the plugins that let me color text however their take uses far too much symbols that are visible in live preview and make it uneasy to keep track of where you were. I want the minimum amount of symbols and i dont want to see anything that doesnt need to be there. For example till now this CSS Snippet requires for coloring text that there is a visible #+1-2 letters before the colored text.

Customised for Dark Mode; Colors supported:
dr=dark red
da=dark aqua
dp=dark pink
dg=dark green
dy=dark yellow
db=dark blue

I would like to color text not by using a # but rather 1-2 letters before * or _ or ==
Examples: btext for blue italic text, rtext for red bold text, g==text== for green highlighted text

AND i want an additional function to just color text by using () after the 1-2 color letters
Example: b(text) for blue text, r(text) for text to be red

CUSTOMISED 8 + 8 highlight colors.css (9.3 KB)

CUSTOMISED Bold italics combine NEW.css (443 Bytes)

1 Like

The coloring here is only possible because we (the CSS) can hook onto tags, .cm-tag-w, a[href^="w"], or existing bold .cm-strong selectors, etc.

A plugin is required for what you are asking for. I haven’t seen one ready-to-go that can do anything like this, but you could check out GitHub - nothingislost/obsidian-dynamic-highlights: An experimental Obsidian plugin that highlights all occurrences of the word under the cursor.

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