blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Feat: add color preview models support (#624)

Browse Source 
http://fixit.lruihao.cn/documentation/content-management/markdown-syntax/extended/#color-preview
This commit is contained in:
Cell
2025-08-17 18:45:13 +08:00
committed by GitHub
parent 014e1fa67c
commit c890f61359
4 changed files with 58 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_page/_single.scss
+1
View File
@@ -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 {
assets/css/_partials/_single/_color-preview.scss
+22
View File
@@ -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;
}
}
}
layouts/_partials/function/color-preview.html
+34
View File
@@ -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 -}}
layouts/_partials/function/content.html
+1
View File
@@ -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 -}}