S-Color-Inline
Show color swatches next to CSS color values in inline code.
- Overview
- Scorecard
- Updates1
An Obsidian plugin that puts a small color swatch next to any CSS color you write in inline code. Type `#0080ff` and you see the color right beside it.
It works in Live Preview and Reading view. Fenced code blocks are skipped on purpose, so a CSS file pasted into a note stays clean.
Supported formats
| Format | Examples |
|---|---|
| Hex | #0fa #ff0f #0080ff #ff008080 |
| RGB / RGBA | rgb(128,128,128) rgba(0,255,255,0.5) |
| HSL / HSLA | hsl(150,50%,90%) hsla(32,100%,50%,0.8) |
Case doesn't matter, so RGB(...) and #FFF work too. The color has to fill the whole code span: `#fff` gets a swatch, `color: #fff` does not.
Install
Manual
- Download
main.js,manifest.jsonandstyles.cssfrom the latest release. - Put them in
<your vault>/.obsidian/plugins/s-color-inline/. - Reload Obsidian and turn on S-Color-Inline under Settings > Community plugins.
From source
git clone https://github.com/Abdulkader-Safi/s-color-inline.git
cd s-color-inline
npm install
npm run build
Use npm run dev to rebuild on every save while you work.
Screenshots
| Theme | Light | Dark |
|---|---|---|
| Default | .png) |
.png) |
| Minimal | .png) |
.png) |
| Things | .png) |
.png) |
Credits
Based on Inline Color Swatch by Suika, released under MIT.
License
MIT. See LICENSE.
HealthExcellent
ReviewSatisfactory
About
Display a small color swatch beside inline CSS color codes (hex, RGB(A), HSL(A)), case-insensitive. Skip fenced code blocks and show swatches only when the inline code contains just the color; apply in Live Preview and Reading view.Details
Current version
1.0.0
Last updated
6 hours ago
Created
6 hours ago
Updates
1 release
Compatible with
Obsidian 1.12.4+
Platforms
Desktop, Mobile
License
MIT
Sponsor