From c890f61359f1d1a4b24a67024a3834c00f676956 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Sun, 17 Aug 2025 18:45:13 +0800
Subject: [PATCH] :tada: Feat: add color preview models support (#624)

http://fixit.lruihao.cn/documentation/content-management/markdown-syntax/extended/#color-preview
---
 assets/css/_page/_single.scss                 |  1 +
 .../css/_partials/_single/_color-preview.scss | 22 ++++++++++++
 layouts/_partials/function/color-preview.html | 34 +++++++++++++++++++
 layouts/_partials/function/content.html       |  1 +
 4 files changed, 58 insertions(+)
 create mode 100644 assets/css/_partials/_single/_color-preview.scss
 create mode 100644 layouts/_partials/function/color-preview.html

diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index 5421be4c..1f81f9dd 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -2,6 +2,7 @@
 @import '../_partials/_single/fixit-decryptor';
 @import '../_partials/_single/collections';
 @import '../_partials/_single/related';
+@import '../_partials/_single/color-preview';
 
 .single {
   .single-title {
diff --git a/assets/css/_partials/_single/_color-preview.scss b/assets/css/_partials/_single/_color-preview.scss
new file mode 100644
index 00000000..8dacb549
--- /dev/null
+++ b/assets/css/_partials/_single/_color-preview.scss
@@ -0,0 +1,22 @@
+// Color preview styles for inline code
+.color-code {
+  position: relative;
+  #{$rootPrefix}color-code-size: 0.64em;
+
+  .color-preview {
+    display: inline-block;
+    width: var(#{$rootPrefix}color-code-size);
+    height: var(#{$rootPrefix}color-code-size);
+    border-radius: 50%;
+    margin-right: 0.25em;
+    vertical-align: middle;
+    border: 1px solid;
+    border-color: var(#{$rootPrefix}color-preview-border-color, #d1d9e0b3);
+    pointer-events: none;
+    transform: translateY(-1px);
+
+    [data-theme='dark'] & {
+      #{$rootPrefix}color-preview-border-color: #3d444db3;
+    }
+  }
+}
diff --git a/layouts/_partials/function/color-preview.html b/layouts/_partials/function/color-preview.html
new file mode 100644
index 00000000..614d8b2a
--- /dev/null
+++ b/layouts/_partials/function/color-preview.html
@@ -0,0 +1,34 @@
+{{- /*
+  Color preview rendering
+  This function adds color visualization to code elements that contain ONLY color values.
+  Supports HEX, RGB, and HSL color formats like GitHub's color preview feature.
+  
+  Examples:
+  `#0969DA` -> displays a blue color preview circle
+  `rgb(9, 105, 218)` -> displays a blue color preview circle  
+  `hsl(212, 92%, 45%)` -> displays a blue color preview circle
+  
+  But excludes:
+  `` `#0969DA` `` -> renders as normal code (syntax example)
+  `test #0969DA` -> renders as normal code (has leading text)
+  ` #0969DA` -> renders as normal code (has leading space)
+  `#0969DA ` -> renders as normal code (has trailing space)
+*/ -}}
+
+{{- $content := . -}}
+
+{{- /* Only apply color preview to code elements that contain EXACTLY a color value and nothing else */ -}}
+
+{{- /* HEX color pattern: code must contain ONLY #RRGGBB (6 digits) */ -}}
+{{- $content = replaceRE `<code>(#[0-9a-fA-F]{6})</code>` `<code class="color-code"><span class="color-preview" style="background-color: $1;" title="Color: $1"></span>$1</code>` $content -}}
+
+{{- /* HEX color pattern: code must contain ONLY #RGB (3 digits) */ -}}
+{{- $content = replaceRE `<code>(#[0-9a-fA-F]{3})</code>` `<code class="color-code"><span class="color-preview" style="background-color: $1;" title="Color: $1"></span>$1</code>` $content -}}
+
+{{- /* RGB color pattern: code must contain ONLY rgb(r,g,b) */ -}}
+{{- $content = replaceRE `<code>(rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\))</code>` `<code class="color-code"><span class="color-preview" style="background-color: $1;" title="Color: $1"></span>$1</code>` $content -}}
+
+{{- /* HSL color pattern: code must contain ONLY hsl(h,s%,l%) */ -}}
+{{- $content = replaceRE `<code>(hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\))</code>` `<code class="color-code"><span class="color-preview" style="background-color: $1;" title="Color: $1"></span>$1</code>` $content -}}
+
+{{- return $content -}}
diff --git a/layouts/_partials/function/content.html b/layouts/_partials/function/content.html
index 5a5362ce..d927065b 100644
--- a/layouts/_partials/function/content.html
+++ b/layouts/_partials/function/content.html
@@ -16,6 +16,7 @@
 
   {{- $content = partial "function/task-lists.html" $content -}}
   {{- $content = partial "function/marked-text.html" $content -}}
+  {{- $content = partial "function/color-preview.html" $content -}}
   {{- $content = partial "function/escape.html" $content -}}
 
 {{- end -}}