Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-12 07:12:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: introduce Expressive Code for code block rendering (#476)

Browse Source 
* feat: improve code block feature with Expressive Code

* docs: add example Markdown file for visual review

* feat: improve styles of Expressive Code

* fix: errors from the merging

* chore: formatting

* chore: update config

* chore: update dependencies

* fix: fix build error

* fix: minor fixes

* fix: style tweaks

* docs: update example post

* fix: isolate copy button timeouts to avoid cross-button interference

---------

Co-authored-by: Hasenpfote <Hasenpfote36@gmail.com>
This commit is contained in:
Saica
2025-06-03 22:41:36 +08:00
committed by GitHub
parent e640964e5e
commit ee48c2f09d
15 changed files with 1384 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/expressive-code.css Normal file
View File

@@ -0,0 +1,3 @@
.expressive-code .frame {
@apply !shadow-none;
}

18
src/styles/main.css
View File

@@ -110,22 +110,6 @@
.btn-regular-dark.success {
@apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))]
}
.copy-btn-icon {
@apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2
}
.copy-btn .copy-icon {
@apply opacity-100 fill-white dark:fill-white/75
}
.copy-btn.success .copy-icon {
@apply opacity-0 fill-[var(--deep-text)]
}
.copy-btn .success-icon {
@apply opacity-0
}
.copy-btn.success .success-icon {
@apply opacity-100
}
}
.custom-md img, #post-cover img {
@@ -154,4 +138,4 @@
.collapsed {
height: var(--collapsedHeight);
}
}

35
src/styles/markdown.css
View File

@@ -58,19 +58,38 @@
}
}
pre {
@apply bg-[var(--codeblock-bg)] !important;
@apply rounded-xl px-5;
.copy-btn {
all: initial;
@apply btn-regular-dark opacity-0 shadow-lg shadow-black/50 absolute active:scale-90 h-8 w-8 top-3 right-3 text-sm rounded-lg transition-all ease-in-out z-20 cursor-pointer;
}
.frame:hover .copy-btn {
opacity: 1;
}
code {
@apply bg-transparent text-inherit text-sm p-0;
.copy-btn-icon {
@apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-4 h-4 fill-white pointer-events-none;
}
.copy-btn .copy-icon {
@apply opacity-100 fill-white dark:fill-white/75;
}
.copy-btn.success .copy-icon {
@apply opacity-0 fill-[var(--deep-text)]
}
.copy-btn .success-icon {
@apply opacity-0 fill-white;
}
.copy-btn.success .success-icon {
@apply opacity-100
}
::selection {
@apply bg-[var(--codeblock-selection)];
}
.expressive-code {
@apply my-4;
::selection {
@apply bg-[var(--codeblock-selection)];
}
}
ul, ol {
li::marker {
@apply text-[var(--primary)];

3
src/styles/variables.styl
View File

@@ -56,7 +56,8 @@ define({
--inline-code-color: var(--btn-content)
--selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
--codeblock-selection: oklch(0.40 0.08 var(--hue))
--codeblock-bg: oklch(0.2 0.015 var(--hue)) oklch(0.17 0.015 var(--hue))
--codeblock-bg: oklch(0.17 0.015 var(--hue)) oklch(0.17 0.015 var(--hue))
--codeblock-topbar-bg: oklch(0.3 0.02 var(--hue)) oklch(0.12 0.015 var(--hue))
--license-block-bg: black(0.03) var(--codeblock-bg)