mirror of
https://github.com/nellowtcs/Obsidian-IroView.git
synced 2026-07-22 06:56:57 +00:00
97 lines
3.2 KiB
Markdown
97 lines
3.2 KiB
Markdown
# Obsidian-IroView
|
||
|
||
[](#contributors)
|
||
|
||
|
||
|
||
Preview HEX, HSL, and RGB colors directly in your Obsidian notes, just like VSCode's color preview.
|
||
Available on [Obsidian](https://community.obsidian.md/plugins/iroview)!
|
||
|
||
## Features
|
||
|
||
- **Color preview**: Instantly see color swatches for HEX, RGB(A), and HSL(A) values in your notes
|
||
- **Live in editor and reading view**: Works in both editing and preview modes
|
||
- **Customizable**: Toggle swatches, text colorization, and supported formats
|
||
- **Contrast-aware**: Only colorizes text if it remains readable
|
||
- **Performance optimized**: Efficiently processes large notes
|
||
|
||
## Supported Formats
|
||
|
||
- HEX: `#RGB`, `#RRGGBB`, `#RGBA`, `#RRGGBBAA`
|
||
- RGB/RGBA: `rgb(255, 0, 0)`, `rgba(255, 0, 0, 0.5)`
|
||
- HSL/HSLA: `hsl(120, 100%, 50%)`, `hsla(120, 100%, 50%, 0.5)`
|
||
|
||
## Settings
|
||
|
||
- **Show color swatch**: Display a small colored square before color values
|
||
- **Colorize text**: Apply the color to the text itself (if contrast is good)
|
||
- **Enable in reading view**: Show previews in rendered Markdown
|
||
- **Supported color formats**: Toggle which color formats are recognized
|
||
|
||
## Example
|
||
|
||
Type any of these in your note:
|
||
|
||
```
|
||
#ff0000
|
||
rgb(255, 0, 0)
|
||
hsl(0, 100%, 50%)
|
||
```
|
||
|
||
And see a color preview appear inline!
|
||
|
||
## Installation
|
||
|
||
### Direct (Recommended)
|
||
|
||
You can install **IroView** directly from Obsidian’s Community Plugins browser (or online [here](https://community.obsidian.md/plugins/iroview)).
|
||
|
||
1. Open **Settings -> Community Plugins**
|
||
2. Make sure **Restricted Mode** is off
|
||
3. Click **Browse**
|
||
4. Search for **“IroView”**
|
||
5. Click **Install**, then **Enable**
|
||
|
||
### Manual
|
||
|
||
If you prefer installing manually:
|
||
|
||
1. Download the latest release from the repo’s **Releases** page
|
||
- You need:
|
||
- `main.js`
|
||
- `manifest.json`
|
||
- `styles.css` (if present)
|
||
2. Create a folder in your vault:
|
||
```
|
||
.obsidian/plugins/iroview
|
||
```
|
||
3. Place all downloaded files inside that folder
|
||
4. Restart Obsidian
|
||
5. Go to **Settings -> Community Plugins** and enable **IroView**
|
||
|
||
## Technical Details
|
||
|
||
- Built with TypeScript and CodeMirror 6
|
||
- Uses Obsidian's popout-compatible `activeDocument` for DOM operations
|
||
- Efficient regex-based color detection
|
||
|
||
## Star History
|
||
|
||
<a href="https://www.star-history.com/#NellowTCS/Obsidian-IroView&Date">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=NellowTCS/Obsidian-IroView&type=Date&theme=dark" />
|
||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=NellowTCS/Obsidian-IroView&type=Date" />
|
||
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=NellowTCS/Obsidian-IroView&type=Date" />
|
||
</picture>
|
||
</a>
|
||
|
||
## Contributors
|
||
|
||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
||
<!-- prettier-ignore-start -->
|
||
<!-- markdownlint-disable -->
|
||
|
||
<!-- markdownlint-restore -->
|
||
<!-- prettier-ignore-end -->
|
||
|
||
<!-- ALL-CONTRIBUTORS-LIST:END -->
|