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!
