Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 07:33:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Shiki transformers for better syntax highlighting (#534)

Browse Source 
* refactor: organize prose related styles inside nested prose

* feat: add Shiki transformers for better syntax highlighting

* chore: update blog posts using Shiki transformers

Closes #210
This commit is contained in:
Sat Naing
2025-06-13 23:08:18 +07:00
committed by GitHub
parent b07ee5cdcc
commit 76e15b55e3
9 changed files with 121 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/typography.css
+43 -36
View File
@@ -1,35 +1,56 @@
@plugin '@tailwindcss/typography';
@layer base {
/* ===== Override default Tailwind Typography styles ===== */
.prose {
@apply prose-headings:!mb-3 prose-headings:!text-foreground prose-h3:italic prose-p:!text-foreground prose-a:!text-foreground prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-accent prose-blockquote:!border-l-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-foreground prose-figcaption:opacity-70 prose-strong:!text-foreground prose-code:rounded prose-code:bg-muted/75 prose-code:p-1 prose-code:!text-foreground prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-foreground prose-ul:overflow-x-clip prose-ul:!text-foreground prose-li:marker:!text-accent prose-table:text-foreground prose-th:border prose-th:border-border prose-td:border prose-td:border-border prose-img:mx-auto prose-img:!my-2 prose-img:border-2 prose-img:border-border prose-hr:!border-border;
}
.prose a {
@apply break-words hover:!text-accent;
}
.prose thead th:first-child,
tbody td:first-child,
tfoot td:first-child {
padding-inline-start: 0.5714286em !important;
}
.prose h2#table-of-contents {
@apply mb-2;
}
.prose details {
@apply inline-block cursor-pointer text-foreground select-none;
}
.prose summary {
@apply focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent focus-visible:outline-dashed;
}
.prose h2#table-of-contents + p {
@apply hidden;
a {
@apply break-words hover:!text-accent;
}
details {
@apply inline-block cursor-pointer text-foreground select-none [&_p]:hidden [&_ul]:!my-0;
}
summary {
@apply focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent focus-visible:outline-dashed;
}
thead th:first-child,
tbody td:first-child,
tfoot td:first-child {
padding-inline-start: 0.5714286em !important;
}
}
/* ===== Code Blocks & Syntax Highlighting ===== */
pre:has(code) {
@apply border border-border;
.astro-code {
@apply border bg-(--shiki-light-bg) text-(--shiki-light) outline-border [&_span]:text-(--shiki-light);
}
html[data-theme="dark"] .astro-code {
@apply bg-(--shiki-dark-bg) text-(--shiki-dark) [&_span]:text-(--shiki-dark);
}
/* Styles for Shiki transformers */
/* https://shiki.style/packages/transformers */
.astro-code {
.line.diff.add {
@apply relative *:bg-green-500/20 before:absolute before:-left-3 before:text-green-500 before:content-['+'];
}
.line.diff.remove {
@apply relative *:bg-red-500/30 before:absolute before:-left-3 before:text-red-500 before:content-['-'];
}
.line.highlighted {
@apply *:!bg-slate-400/20;
}
.highlighted-word {
@apply rounded-sm border border-border px-0.5 py-px;
}
}
/* Break words in code and blockqoute */
.prose code,
.prose blockquote {
@apply break-words;
@@ -39,18 +60,4 @@
/* add line breaks whenever necessary for codes under table */
@apply break-all sm:break-normal;
}
pre > code {
white-space: pre;
}
/* Apply Dark Theme (if multi-theme specified) */
html[data-theme="dark"] pre:has(code),
html[data-theme="dark"] pre:has(code) span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
}