English · 한국어
A multi-color highlight plugin that doesn't break inline markdown. Powered by Obsidian's native
==text==syntax.
Hilo blends Highlight + Lowlight, and means "thread" in Spanish — reflecting the plugin's philosophy of weaving color into your notes without breaking markdown's natural flow.
<mark> HTML-based highlight plugins lose inline markdown inside the mark because Obsidian doesn't parse the contents — so **bold**, [[wikilinks]], and *italics* render as raw text. Hilo sidesteps this by adding only a color token ({slug}) to Obsidian's already-recognized ==text== syntax.
| Hilo | <mark>-based plugins |
|
|---|---|---|
=={red}**bold text**== |
✅ renders correctly | ❌ ** shows as literal |
=={blue}[[wikilink]]== |
✅ link works | ❌ link not recognized |
| Note portability | ✅ slug (yellow) only — hex lives in settings |
❌ hex baked into the note |
| Export compatibility | ✅ ==text== is a CommonMark extension |
△ <mark> is also standard, but tokens leak |
| Bundle size | ✅ ~8 KB | ❌ tens to hundreds of KB |
- Slug-based color reference. The markdown source stores only the semantic name; hex values live in plugin settings.
- Inline markdown (
**bold**,[[wikilinks]],*italics*) works correctly inside a highlight.
- Source mode / Live Preview / Reading view all render highlights identically.
- In Live Preview the
{color}token is hidden automatically; placing the cursor on the token reveals it for editing.
- Highlight → pick a color: wraps the selection
- Change color → swap to another color
- Unhighlight: removes the marker and token
- Per-color wrap commands (e.g.
Hilo: Yellow,Hilo: Red) Hilo: Open color palette— opens the context-aware menu at the caretHilo: Unhighlight
Assign hotkeys in Settings → Hotkeys. Each color row in Settings → Hilo also shows the currently assigned hotkey, and the keyboard button (⌨) jumps straight to the Hotkeys page.
- Settings → Hilo lets you add, edit, delete, reorder, and enable/disable colors.
- Define any color as
slug+hex(e.g.yellow+#fff3a3). - Disabled colors are hidden from menus but remain visually preserved in existing highlights.
- Background + per-color darker underline. Choose it under Settings → Highlight style → Lowlight.
- Underline color is computed from each background via HSL (hue preserved, saturation 100%, lightness −30pp).
- Underline uses
box-shadowinstead oftext-decorationto avoid being overridden by Chromium's spellcheck.
- The context menu also works on existing
<mark style="...">text</mark>highlights. - Change color rewrites them to
=={slug}text==. - Unhighlight strips the mark tag.
- No bulk conversion required — migrate progressively as you touch each note.
- Settings → Community plugins → Browse
- Search for "Hilo" → Install → Enable
- Download the latest release from the Releases page
- Copy
main.js,manifest.json, andstyles.cssinto your vault's.obsidian/plugins/hilo/folder - Enable Hilo under Settings → Community plugins
- Select text
- Right-click → Highlight → pick a color
- Or use a per-color hotkey
The selection becomes =={color}text== and the color renders immediately.
- Place the cursor inside an existing highlight
- Right-click → Change color → pick a new color
- Place the cursor inside the highlight
- Right-click → Unhighlight (or use the hotkey)
- Settings → Hilo
- Click Add color
- Enter a slug (e.g.
pink) and a hex value (e.g.#ffc0cb) - The new color is available in every view immediately.
Place the cursor on an existing <mark> highlight and right-click — the same menu appears. Use Change color to convert it to the Hilo token format, or Unhighlight to remove it.
Hilo's output format is the single inline form =={color}content==.
- The color slug is lowercase alphanumeric plus hyphens (e.g.
yellow,red,1st,2nd,soft-blue). - The slug may start with a letter or a digit.
- If the slug isn't in your settings catalog, the token is still valid but renders without color (text appears uncolored).
Exporting outside Obsidian: external markdown renderers may show the
{color}token as literal text. If you publish to such renderers, strip tokens before export (automatic stripping is a future option).
The configured background color fills the entire highlight area.
- Subtle background tint plus a per-color darker underline
- Readable while still clearly differentiated by color
- Underline color is recomputed automatically whenever you add or edit a color
Set under Settings → Hilo → Highlight style.
Hilo automatically picks up Obsidian's interface language.
- Supported languages: English (default), Korean (한국어)
- Detection: Obsidian's
localStoragelanguagekey - Unsupported languages fall back to English
After changing the language under Settings → About → Language, toggle the plugin off and on (Settings → Community plugins → Hilo) so the command palette names (e.g. Hilo: Open color palette) pick up the new language. Obsidian freezes command names at registration time. The settings UI, right-click menu, and modals update without a reload.
To add a language, copy src/i18n/locales/en.ts as a new locale file under src/i18n/locales/, translate the values, and register the new entry in src/i18n/index.ts's dictionary map.
- Obsidian 1.5.0 or newer
- Desktop + mobile (mobile is in beta — feedback welcome)
- All Obsidian view modes (Source / Live Preview / Reading)
- Light and dark themes
The following features are deliberately omitted to keep Hilo focused. They may be revisited based on user feedback:
- Annotations / notes attached to highlights
- Sidebar list of highlights (NotesTab)
- Color preview icons in menus
- Drag-to-reorder colors
Hilo's right-click menu structure, settings UI flow, and visual style catalog are inspired by Chetachi's Highlightr and Highlightr+. They pioneered multi-color highlighting in Obsidian; Hilo borrows their patterns while swapping the output format for native ==text==.