Bring Colorful Highlights to your Obsidian

Disclaimer

Is this plugin open source? Yes
Is this plugin completely free? Yes
Is this plugin vibe-coded beyond the author’s ability to comprehend how it works? No
Community Directory: : Colorful Highlights — Obsidian Plugin


Hey, I developed a new Obsidian plugin for adding colorful highlight styles.

Don’t worry — no nasty HTML involved. It only takes one extra character, like this:

==:red_apple:This is an apple… I mean, a red highlight==.

It’s fully compatible with the native highlight syntax; you simply add an emoji at the beginning of the highlighted text. An apple is red, so it stands for a red highlight.

You can pick any character you like as the color marker — for example, :banana: for yellow, :four_leaf_clover: for green… all of these are configurable in the plugin settings.

Of course, the more conventional approach is to use colored emoji:
:red_circle::yellow_circle::green_circle::blue_circle::purple_circle:

Note: I learned this clever trick from the Octarine software. Praise be to it!

What Happens Without the Plugin?

I know many people worry that weird plugin-specific custom syntax will pollute the purity of their markdown text.
I feel the same way.

Once the plugin is gone, your text will look like:

Yes, they all fall back to yellow, but at the same time they all retain their “color” information, so it doesn’t look messy at all.
(Unless you really hate emoji :smiling_face_with_horns:)

How does it works?

It automatically render the highlights with emojis.

You can quickly add colorful highlights via the right click menu:

AI Disclosure

First of all, this post was translated with AI, because my English is so terrible :frowning:

But the original text was typed by me, word by word.

Is this a Vibe Coding plugin?

Yes. I mainly used Kimi K3 for the programming.
I do have experience writing plugins by hand (before the era of Vibe Coding), but for this plugin, I only skimmed through its code structure and left most of the coding work to the AI.

My other plugin repositories have already accumulated a complete obsidian-plugin-dev skill set for Agents, covering the usual build-and-bundle workflow, settings conventions, and common pitfalls.

That’s why you can see it properly supports plugin icons and SettingGroup.

Do I understand how this plugin works?

YES.

It’s implemented with CodeMirror 6’s decoration feature: it detects the corresponding characters (the color-representing emoji), applies styling to the highlighted text they belong to, and hides the characters themselves.

I learned this technique from the Dynamic Highlights plugin. Since I’d had this need for so long (I’d been designing and thinking about it since around the end of 2025), I specifically studied decorations and hand-wrote a small test plugin for it.

In fact, if you don’t need to hide the emoji characters, you can achieve a similar multi-color highlight effect using only DynamicHighlights’ regex matching feature.

So if you’re interested in the effect but don’t have confidence in a Vibe Coding plugin, you can try that more durable and reliable approach.

Community link: Colorful Highlights — Obsidian Plugin

Github repo: Moyf/colorful-highlights: A plugin that provides colorful highlights for obsidian.

:star: Star it if you feel it’s helpful :wink:

1 Like