🎨 Add Shiki light/dark mode styles and line number formatting

This commit is contained in:
pheralb
2025-08-29 00:12:55 +01:00
parent a1d2b142f5
commit 914ee8224f
+30
View File
@@ -41,3 +41,33 @@
"OnestMedium", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
}
/* Shiki light/dark mode */
html.dark .shiki,
html.dark .shiki span {
color: var(--shiki-dark) !important;
background-color: transparent !important;
}
/* Shiki Line Numbers */
code {
counter-reset: step;
counter-increment: step 0;
}
code:has(.line:nth-child(2)) .line::before {
content: counter(step);
counter-increment: step;
width: 1rem;
margin-right: 1.5rem;
display: inline-block;
text-align: right;
}
html.light code:has(.line:nth-child(2)) .line::before {
color: #a0a0a0;
}
html.dark code:has(.line:nth-child(2)) .line::before {
color: #525252;
}