Multiple highlight colors: possible with HTML (but limited formatting)

[chriswaterguy]

This is an info post. It took me a while to understand the issues with multiple highlights, so I’d like to make it clearer for others.

Custom highlights

It is possible to have multiple highlight colours, using some simple HTML.

You can input the HTML yourself or use a plugin (Highlightr or Note Annotations.) If you use a plugin it will just simplify the addition of the HTML. The result is the same.

Limitation

But there’s a limitation: The highlighted text will be (mostly) treated as plain text, not markdown. No formatting (bold, italic…) and no active links.
CORRECTION: If you place formatting marks outside the html, it will take effect in reading mode (and in callouts). Not in live preview mode.
E.g. **<mark style="background: #FF4500;">OrangeRed highlight, bold</mark>**
→ OrangeRed highlight, bold
(It shows the correct colour in Obsidian, but not in the forum.)

Options

There is no complete workaround, but you might get what you need with:

1. Callouts. The whole block will be coloured. Markdown works.
2. List callouts (the plugin). Markdown works just as with callouts, but the color applies to an individual bullet point, numbered list item or task.
3. Use the HTML solution but only apply it to plain text. (I use Highlightr plugin commands for this.)

Changing the default highlight color

Note that it’s simple to change the highlight color with a CSS snippet, but you’ll still only have one color.

Here’s the CSS snippet I use to adjust the colour in both dark and light modes. But again, it doesn’t give you more than one colour to use at the same time. (Pardon the wordy comments in the code – I used an LLM to create the snippet based on my colour/mood requirements.)

.theme-light {
  /* This specifically targets text highlighted using Markdown syntax (e.g., '==highlight==')
     It ensures the background color provides good contrast against the standard text color. */
  .cm-s-obsidian .cm-highlight {
    background-color: #F5CE93; /* Soft Terracotta for slightly enhanced contrast */
    color: var(--text-normal); /* Keeps the standard text color (usually dark in light mode) */
  }

.theme-dark {
  /* This specifically targets text highlighted using Markdown syntax (e.g., '==highlight==')
     It ensures the background color provides good contrast against the standard text color. */
  .cm-s-obsidian .cm-highlight {
    background-color: #8F590F; /* Deep Golden Brown for excellent contrast */
    color: var(--text-normal); /* Keeps the standard text color (usually light in dark mode) */
  }

[reaty]

It is possible to write css to make simple highlighted text, bold highlighted text, italic highlighted text etc different colors. It gives you just a few colors, but allows to stick with markdown. Here is the code I use:

body {
  --text-highlight-bg: rgba(var(--color-orange-rgb), 0.2);
  --text-highlight-italic-bg: rgba(var(--color-purple-rgb), 0.2);
  --text-highlight-bold-bg: rgba(var(--color-green-rgb), 0.2);
  --text-highlight-bold-italic-bg: rgba(var(--color-red-rgb), 0.2);
}

.cm-em, 
em, 
mark:has(em:only-child) {
  --text-highlight-bg: var(--text-highlight-italic-bg);
}

.cm-strong, 
strong, 
mark:has(strong:only-child) {
  --text-highlight-bg: var(--text-highlight-bold-bg);
}

.cm-em.cm-strong, strong > em, 
mark:has(strong:only-child > em:only-child) {
  --text-highlight-bg: var(--text-highlight-bold-italic-bg); 
}

And the result:

==Highlight==

*==Italic highlight==*

**==Bold highlight==**

***==Bold italic highlight==***