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

* 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

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)];