Hide color names on a case-by-case basis

.changes/hide-individual-color-names.md

@@ -0,0 +1,5 @@
+---
+"obsidian-css-inlay-colors": minor:feat
+---
+
+Surround colors in square brackets to hide the color names on a case-by-case basis

README.md

@@ -18,6 +18,12 @@ Enable the color picker setting to change a color using a color picker in live p
 
 By default, colors can be copied to the clipboard by clicking on them. This only works in reading mode, and can be disabled in the plugin settings.
 
+### Hide Color Names
+
+Surround a color with square brackets (\`[\#663399]\`) to hide the color name and only show the inlay swatch in live preview and reading mode.
+
+There's also an option in the plugin settings to hide all color names globally.
+
 ### Custom CSS
 
 Customize the inlays by targeting the `.css-color-inlay` class. For example, you can make them circular with the following snippet:

src/live.ts

@@ -25,7 +25,7 @@ export const inlayExtension = (settings: CssColorsPluginSettings) => {
 
       update(update: ViewUpdate) {
         if (
-          settings.hideNames ||
+          update.selectionSet ||
           update.docChanged ||
           update.viewportChanged ||
           syntaxTree(update.startState) !== syntaxTree(update.state)
@@ -111,7 +111,14 @@ const createColorWidgets = (
         if (
           node.type.prop(tokenClassNodeProp)?.split(' ').includes('inline-code')
         ) {
-          const text = view.state.sliceDoc(node.from, node.to)
+          let text = view.state.sliceDoc(node.from, node.to)
+          let isNameHidden = false
+
+          // If color is surrounded with square brackets, the name should be hidden
+          if (text.startsWith('[') && text.endsWith(']')) {
+            text = text.slice(1, -1)
+            isNameHidden = true
+          }
 
           // Not a valid color
           let color: Color | undefined
@@ -123,7 +130,7 @@ const createColorWidgets = (
           }
 
           if (
-            settings.hideNames &&
+            (settings.hideNames || isNameHidden) &&
             !view.state.selection.ranges.some(
               (range) => range.from - 1 <= node.to && range.to + 1 >= node.from,
             )

src/preview.ts

@@ -5,7 +5,14 @@ import type { CssColorsPluginSettings } from './settings'
 export const inlayPostProcessor =
   (settings: CssColorsPluginSettings) => (el: HTMLElement) => {
     for (const code of el.findAll('code')) {
-      const color = code.innerText.trim()
+      let color = code.innerText.trim()
+      let isNameHidden = false
+
+      // If color is surrounded with square brackets, the name should be hidden
+      if (color.startsWith('[') && color.endsWith(']')) {
+        color = color.slice(1, -1)
+        isNameHidden = true
+      }
 
       // Not a valid color
       try {
@@ -15,13 +22,13 @@ export const inlayPostProcessor =
       }
 
       // Clear codeblock before adding inlay
-      if (settings.hideNames) {
+      if (settings.hideNames || isNameHidden) {
         code.innerHTML = ''
       }
 
       code.createSpan({
         prepend: true,
-        cls: `css-color-inlay ${settings.hideNames ? 'css-color-name-hidden' : ''}`,
+        cls: `css-color-inlay ${settings.hideNames || isNameHidden ? 'css-color-name-hidden' : ''}`,
         attr: { style: `--css-color-inlay-color: ${color};` },
       })
 

src/settings.ts

@@ -57,9 +57,9 @@ export class CssColorsSettingsTab extends PluginSettingTab {
       })
 
     new Setting(containerEl)
-      .setName('Hide color names')
+      .setName('Hide all color names')
       .setDesc(
-        'Hides the inline code block in live preview and reading mode so only the color inlay is visible.',
+        'Hides the inline code block in live preview and reading mode for all colors so only the color inlay is visible. You can also do this on a case-by-case basis by surrounding the color with square brackets.',
       )
       .addToggle((toggle) =>
         toggle