/* prism-vscode.css
- VSCode-like dark code block
- Line numbers (no overlap)
- Row stripes
- Toolbar + Copy button single border
*/
:root {
--prism-bg: #1e1e1e;
--prism-fg: #d4d4d4;
--prism-muted: rgba(255, 255, 255, 0.45);
--prism-border: rgba(255, 255, 255, 0.14);
--prism-border-strong: rgba(255, 255, 255, 0.18);
--prism-radius: 16px;
--prism-pad-y: 18px;
--prism-pad-x: 18px;
--prism-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
/* line-height & stripe height must match */
--prism-line-height: 1.65;
--prism-line: 1.65em;
/* line numbers column */
--prism-linenum-w: 3.4em;
}
/* Base containers (Prism default selectors) */
pre[class*="language-"],
code[class*="language-"] {
font-family: var(--prism-font);
font-size: 14px;
line-height: var(--prism-line-height);
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
tab-size: 2;
hyphens: none;
}
/* Tistory codeblock fallback:
- Tistory sometimes outputs ...
- Style those too, even if language-* class is missing.
*/
pre[data-ke-type="codeblock"],
pre[class^="bash"],
pre[class^="shell"],
pre[class^="js"],
pre[class^="ts"],
pre[class^="json"],
pre[class^="python"] {
font-family: var(--prism-font);
font-size: 14px;
line-height: var(--prism-line-height);
}
/* Code block box */
pre[class*="language-"],
pre[data-ke-type="codeblock"] {
position: relative;
margin: 16px 0;
padding: var(--prism-pad-y) var(--prism-pad-x);
border-radius: var(--prism-radius);
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--prism-fg);
background-color: var(--prism-bg);
overflow: auto;
/* subtle inner depth */
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.45) inset,
0 2px 18px rgba(0, 0, 0, 0.25);
}
/* Row stripes (applies to whole pre) */
pre[class*="language-"],
pre[data-ke-type="codeblock"] {
background-image:
repeating-linear-gradient(to bottom,
rgba(255, 255, 255, 0.035) 0,
rgba(255, 255, 255, 0.035) var(--prism-line),
rgba(255, 255, 255, 0.00) var(--prism-line),
rgba(255, 255, 255, 0.00) calc(var(--prism-line) * 2));
background-attachment: local;
}
/* Ensure code element doesn't add extra padding */
pre>code {
display: block;
padding: 0;
background: none;
color: inherit;
}
/* Inline code (optional) */
:not(pre)>code[class*="language-"] {
padding: 0.15em 0.35em;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
}
/* =========================
Line Numbers (NO OVERLAP)
- !important needed to override prism.css defaults
AND tistory's hljs injected styles
========================= */
pre.line-numbers,
pre[class*="language-"].line-numbers,
pre[data-ke-type="codeblock"].line-numbers {
/* border-box so that absolute left:0 = border edge, not content edge */
box-sizing: border-box !important;
/* Make room for numbers — must beat prism.css padding-left:3.8em */
padding-left: calc(var(--prism-pad-x) + var(--prism-linenum-w)) !important;
}
pre.line-numbers>code,
pre[class*="language-"].line-numbers>code,
pre[data-ke-type="codeblock"].line-numbers>code {
/* MUST be static, NOT relative!
If code is relative, it becomes the offset parent for .line-numbers-rows,
causing left:0 to align with code start = overlap.
Static keeps pre as the offset parent. */
position: static !important;
/* Reset horizontal padding only — keep hljs padding-top (7px) for spacing */
padding-left: 0 !important;
}
.line-numbers .line-numbers-rows {
position: absolute !important;
pointer-events: none;
/* With border-box on pre, left:0 = border edge.
Place numbers starting at the left padding area. */
top: 0 !important;
left: 0 !important;
width: var(--prism-linenum-w) !important;
/* Vertical padding: pre padding (18px) + hljs code padding-top (7px) */
padding-top: calc(var(--prism-pad-y) + 7px) !important;
/* Horizontal padding to center numbers within the gutter */
padding-left: calc(var(--prism-pad-x) * 0.3) !important;
user-select: none;
border-right: 1px solid rgba(255, 255, 255, 0.10);
/* Reset prism.css defaults */
font-size: 100% !important;
letter-spacing: normal !important;
/* Ensure counter starts from 0 */
counter-reset: linenumber !important;
}
.line-numbers .line-numbers-rows>span {
display: block;
height: var(--prism-line);
}
.line-numbers .line-numbers-rows>span:before {
/* counter-increment is already in prism.css — do NOT duplicate here
(duplicating causes 2,4,6 numbering) */
content: counter(linenumber);
display: block;
padding-right: 0.9em;
text-align: right;
color: rgba(255, 255, 255, 0.35);
}
/* =========================
Toolbar (Language + Copy)
========================= */
div.code-toolbar {
position: relative;
}
/* toolbar container */
div.code-toolbar>.toolbar {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 10px;
opacity: 1;
z-index: 3;
}
/* IMPORTANT: toolbar-item wrapper must be clean (prevents "double border") */
div.code-toolbar>.toolbar .toolbar-item {
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Button / badge common styles.
IMPORTANT: use :not() to EXCLUDE nested inside