Compatible highlighting with more colors—and fast!

Compatible & fast highlighting with more colors

Now some of us have been looking for a good way to highlight text in more than one color. Here’s how!

This will require a little setup, but work fast and painlessly using text selection and hotkeys. Plus, it will generate Markdown that’s compatible with almost any non-Obsidian tool.

A short video shows how it looks like and how it’s used.

What’s needed

  • Templater plugin installed and enabled
  • Hotkeys for templates plugin installed and enabled
  • highlight-colors.css snippet installed and enabled
  • Four templates created to insert the HTML code (see below)
  • Four hotkeys defined for above templates, using the Hotkeys for templates plugin. I use
    • Ctrl+Shift+Y for yellow
    • Ctrl+Shift+G for green
    • Ctrl+Shift+R for red
    • Ctrl+Shift+B for blue

The CSS snippet highlight-colors.css

/*
    highlight-colors.css snippet

    Add some colors to the <mark> element in a compatible manner,
    auto-adjusting to light & dark themes.

    Usage:
      <mark>something</mark> → yellow (as usual)
      <mark class="yellow">something</mark> → same yellow
      <mark class="green">something</mark> → green
      <mark class="red">something</mark> → red
      <mark class="blue">something</mark> → blue

    2021-06-07 Matthias C. Hormann (Moonbase59)
*/

.theme-light, .theme-dark {
  /* override built-in */
  --text-highlight-bg: rgba(255, 242, 0, 0.4) !important;
  --text-highlight-bg-active: rgba(255, 128, 0, 0.4) !important;
  /* define our new ones */
  --text-highlight-bg-yellow: rgba(255, 242, 0, 0.4);
  --text-highlight-bg-green: rgba(8, 255, 0, 0.4);
  --text-highlight-bg-red: rgba(255, 0, 17, 0.4);
  --text-highlight-bg-blue: rgba(0, 183, 255, 0.4);
}


/* I hate !important but it’s needed for themes like Obsidian Nord etc. */

mark, mark.yellow {
  background-color: var(--text-highlight-bg-yellow) !important;
}

mark.green {
  background-color: var(--text-highlight-bg-green) !important;
}

mark.red {
  background-color: var(--text-highlight-bg-red) !important;
}

mark.blue {
  background-color: var(--text-highlight-bg-blue) !important;
}

/* Special hack for Discordian theme */
mark {
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important;
  padding: unset !important;
}

Save this into your vault’s .obsidian/snippets/ folder. Don’t forget to reload your CSS snippets and enable this one under Settings → Options → Appearance → CSS snippets !

The CSS for external tools like Pandoc

:root {
  /* define our new highlight colors */
  --text-highlight-bg-yellow: rgba(255, 242, 0, 0.4);
  --text-highlight-bg-green: rgba(8, 255, 0, 0.4);
  --text-highlight-bg-red: rgba(255, 0, 17, 0.4);
  --text-highlight-bg-blue: rgba(0, 183, 255, 0.4);
}

mark, mark.yellow {
  background-color: var(--text-highlight-bg-yellow);
}

mark.green {
  background-color: var(--text-highlight-bg-green);
}

mark.red {
  background-color: var(--text-highlight-bg-red);
}

mark.blue {
  background-color: var(--text-highlight-bg-blue);
}

Save this somewhere and keep it, if you’re using post-processing tools that need to know how to colorize your new Markdown highlights.

The Templater templates

Create these four templates in your Templater templates folder. You can name them mark-yellow, mark-green, mark-red and mark-blue, for example.

<mark class="yellow"><% tp.file.selection() %></mark>
<mark class="green"><% tp.file.selection() %></mark>
<mark class="red"><% tp.file.selection() %></mark>
<mark class="blue"><% tp.file.selection() %></mark>

Enable templates in the Hotkeys for templates plugin

Go to Settings → Plugin Options → Hotkeys for templates and look in Templates defined by the templater-obsidian plugin.

Your four new templates should be shown. Enable them. Hotkeys for templates will now create a Hotkeys entry for each.

Setting the hotkeys

Go to Settings → Options → Hotkeys, search for hotkeys for and you will see all Hotkeys for templates: Insert from Templater: … templates.

Assign hotkeys for the mark-yellow, mark-green, mark-red and mark-blue templates. I used the following, because they are easy to remember:

  • Ctrl+Shift+Y for yellow
  • Ctrl+Shift+G for green
  • Ctrl+Shift+R for red
  • Ctrl+Shift+B for blue

You’re almost there!

Just restart Obsidian to be sure all that CSS starts working, and we’ll come to using it.

Usage

Start by creating a new note with some text (lorem ipsum), or making a copy of an existing note.

Check out the video again if you’re feeling unsure.

You can now use the defined hotkeys to insert the HTML code around the previously selected text. (If you haven’t anything selected, it will just insert the HTML code and you can fill in text manually.)

The <mark>…</mark> HTML is compatible with all Markdown variants, not just with Obsidian. PDFs generated by Obsidian also work just out of the box.

When using the Markdown file externally (i.e. with Pandoc), you need to use some CSS (see above) to let the external application know how to colorize the marked text. Should you forget that, not much harm is done—only all marked text will be shown with yellow highlights.

Drawbacks

Using the above, it’s now super easy to insert compatible markup into your notes, but removing it must be done manually—there is no simple keystroke combination for that.

The Extract highlights plugin currently (v0.0.18) doesn’t recognise <mark> tags with attributes, like <mark class="green">. I’ve opened an issue on GitHub.

Testing I’ve done

I’ve been testing this with a lot of themes, both light and dark mode, and it should work just fine.

FAQ

Q: Why didn’t I use semantic names like important, disagree or the like?

A: The categories are very personal—different people use different colors for their purposes. Most also use the same colors with real text markers in printed documents, and have their personal color scheme remembered. So I figured we all know—and probably use—the four basic text marker colors and used them here.

Enjoy!

15 Likes

I’ve just read this and I have to say it is amazing. I’ve been using a 5 color highlighting system and I can’t imagine currently working without it. I’m gonna try it and in a few weeks write a little bit more about how is the experience.

In the meantime, while I was reading the more I was wishing this was something obsidian could handle by itself. The inability to manually undo the work without editing the text is sort of a killer.

I guess we gotta wait for the WYIIWYG, maybe someday we can highlight text like in Calibre, or maybe even better.

Excellent! But can it be fully integrated in the plug-in?

Thank you. This is great.
Only one question: inside the <mark>...</mark> the links works?
The internal-links - [[]] - seems to works but the color disappears (in my theme, without the underline, the link becomes imperceptible).

EDIT: need to add this

.markdown-preview-view mark .internal-link {
  color: var(--text-accent);
}
2 Likes

Good catch! And good variation. Thanks for sharing!

1 Like

Hi @Moonbase59, first thanks for this awesome post
Highlighting with different colors is indeed very useful, however, i would like to do it without templater. The plugin i use is Hotkeys for templates

I made some html snippet-templates for different colors like
<span style="color: #FF0000" >Text</span>

now my issue is to figure out how to wrap templates around my selected text… ‘Text’ should be a variable, but is this possible without templater?
By the way, i am exploring Obsidian for less than a week …loving this application so far.

hey man,

i can’t make it work. when i activate the snippet highlights don’t take effect in any shape or form. i have disabled all my css snippets and the minimal theme that i use with no success . any idea what i should do? does that snippet on the top is out of date or something

Thank you so much! I’ve always used color-coded highlighting while studying, so this is great!

They initially were not working for me, but I figured out what the problem was.

When I copied the four Templater templates from the post above into four template notes in obsidian, the written part looked like this:

as if it were just a string of cited code.

By removing the triple ` before and after, the text now looks like functioning code:

screenshot_obsidian_highlight_right

and is thus recognised as a command by Hotkeys for templates plugin.
Hope this helps!

Hey, thanks for the setup Moonbase59, it’s amazing.

Just a question : is it possible keep the highlighted text in bold or italic in the live preview ?