colorful-highlights - GitLite

KO | EN

gitlite — search

#docker #chatbot #web #java #artificial-intelligence #ui #terminal #json #claude-code #open-source

colorful-highlights

(★ 9)

A plugin that provides colorful highlights for obsidian.

파일 탐색기

ZIP 다운로드

- - release.yml
- emoji-mapping.webp
- menu.webp
- preview-zh.webp
- preview.webp
- style-setting.webp
- styles.webp
- copy-to-local.mjs
- release-tag.mjs
- version-bump-new.mjs
- - color-highlight-extension.ts
- - index.ts
  - types.ts
- - documents.ts
  - emoji-utils.ts
  - settings-group.ts
- highlight-actions.ts
- reading-renderer.ts
- settings-tab.ts
- settings.ts
.gitignore
CHANGELOG.md
esbuild.config.mjs
eslint.config.mjs
LICENSE
main.ts
manifest.json
package-lock.json
package.json
paseo.json
pnpm-lock.yaml
pnpm-workspace.yaml
README-zh.md
README.md
styles.css
tsconfig.json
versions.json

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

# 프로젝트 배지

Release 바로가기
Downloads 바로가기
Stars 바로가기
License 바로가기
Obsidian 바로가기

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[简体中文](README-zh.md)

Want colored highlights in Obsidian? Colorize `==highlights==` with emoji prefixes. Text like `==🔴important content==` is rendered as a red highlight — the emoji is hidden by default and shown while editing.

![](https://raw.githubusercontent.com/Moyf/colorful-highlights/main/assets/preview.webp)

## Features

- **Custom emoji prefixes** — map any emoji to 5 color slots (yellow / green / red / purple / blue), expandable to 10 (orange / cyan / magenta / gray / Black (Spoiler)) via the extended-colors toggle in settings. Each color can be shown or hidden independently. For example, `🍎` can represent red and `🍌` can represent yellow. The first emoji in each slot is used when writing highlights.
- **Live Preview & Source mode** — Live Preview shows only the colored highlight style; the emoji appears when the cursor enters the highlight. Source mode can optionally keep the emoji visible.
- **Highlight styles** — default, half-strike, double-strike, underline, wavy line, underline only, wavy line only, rounded, outline, and gradient.
- **Default highlight color** — plain `==text==` without an emoji can map to a color slot; switching to that color does not add an emoji prefix.
- **Commands & context menu** — toggle highlights, highlight with a specific color, or remove highlights. Select text (or an existing highlight) and right-click to access the color actions.

![Menu](https://raw.githubusercontent.com/Moyf/colorful-highlights/main/assets/menu.webp)

## Usage

1. Select text and run **Highlight with red** (or any color) from the command palette — the selection becomes `==🔴text==`.
2. Run another color command to switch colors; run **Toggle highlight** to remove the highlight.
3. Right-click selected text to find the same color actions in the editor menu.
4. Or type the syntax manually: `==🔵any emoji prefix works==`.

Example:

```md
This is some ==🔴important text==.
This is a ==🔵theoretical description==, and ==🟢the correct way to handle it==.
```

## Styles

Choose a highlight style in Settings:

![Style settings](https://raw.githubusercontent.com/Moyf/colorful-highlights/main/assets/style-setting.webp)

Example results:

![Highlight styles](https://raw.githubusercontent.com/Moyf/colorful-highlights/main/assets/styles.webp)

## Settings

![](https://raw.githubusercontent.com/Moyf/colorful-highlights/main/assets/emoji-mapping.webp)

| Setting | Description |
| ------- | ----------- |
| Enable colorful highlights | Master switch for parsing and decoration. |
| Highlight style | Default / half-strike / double-strike / underline / wavy line / underline only / wavy line only / rounded / outline / gradient. |
| Default highlight color | Color for plain `==text==`; switching to it removes the emoji prefix. |
| Color intensity | Background color mix percentage (10–100%). |
| Secondary color intensity | Second layer of double-strike and line colors (10–100%). |
| Color rendering | Plugin styles paint the background directly; theme native only overrides `--text-highlight-bg` and lets your theme paint highlights. |
| Decorate in editor / Reading view | Toggle each surface independently. |
| Extended colors | Reveal five extra color slots (orange / cyan / magenta / gray / Black (Spoiler)) in commands, menus, and settings. Use the toggle beside each color to keep only the colors you prefer. Off by default. |
| Colors | Choose a hex color for each regular slot; Black (Spoiler) uses a fixed text-colored cover. The toggle beside each color controls whether it appears in mappings, commands, menus, and rendering. |
| Emoji mappings | Map multiple different emojis to a specific color. You do not need to use every emoji; all of them can represent the corresponding color, but usually only the first one is needed for write-back. |
| Custom color names | Custom display names for the colors. Give them meaning for a color-coding system that fits your workflow. This affects the editor menu and commands; leave blank to use the color name. Off by default. |

## Compatibility

- Works on desktop and mobile (`isDesktopOnly: false`).
- Requires Obsidian 1.13.0+.
- Uses only local parsing and rendering — no network requests, no data leaves your vault.

## Credits

The emoji-highlight mechanism was originally built as [PR #114](https://github.com/trevware/obsidian-sidebar-highlights/pull/114) for [Sidebar Highlights](https://github.com/trevware/obsidian-sidebar-highlights). This plugin extracts that feature into a standalone package. If you also use Sidebar Highlights, the two plugins coexist: this one renders colors in the editor and Reading view, while the sidebar plugin manages highlights and comments.

The `==🔴red==` syntax was inspired by the [Octarine](https://octarine.app/) project.

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=Moyf/colorful-highlights&type=Date)](https://www.star-history.com/#Moyf/colorful-highlights&Date)

## License

MIT