/* * Syntax highlighting for code fences. Single source of truth for * `.tok-*` token coloring — rendered by Lezer's headless highlighter * on the server (app/lib/render-post.ts) and by CodeMirror's view in * the editor. Selector intentionally targets `pre.code-fence` only, * so it applies identically wherever a published code fence appears * (post body, comments, replies, drafts page snippets, etc). * * Palette: VSCode Dark+ default theme. Hex values are VSCode's * canonical token colors so a snippet on a post reads exactly like * the same code in a VSCode editor window. */ /* Surface — VSCode editor background + foreground. Consumers (.md-preview, .post-body, .cmt-body) own padding/radius/font-size so each surface can size code fences for its density. */ pre.code-fence { background: #1e1e1e; color: #d4d4d4; } /* #1e1e1e is a dark card on a white page; on the near-black dark page it read as brown. In dark mode every fence takes the agent box's surfaces, the same as the lesson prompt's terminal, so the manual, posts and lessons match. The light agent boxes (.is-prompt) keep their own. :root in the selector outranks the consumers' .post-body pre rule. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) pre.code-fence:not(.is-prompt) { background: var(--bg); border: 1px solid var(--rule); } :root:not([data-theme="light"]) pre.code-fence:not(.is-prompt) > .code-file { background: #161f2a; border-bottom-color: rgba(255, 255, 255, 0.09); } } :root[data-theme="dark"] pre.code-fence:not(.is-prompt) { background: var(--bg); border: 1px solid var(--rule); } :root[data-theme="dark"] pre.code-fence:not(.is-prompt) > .code-file { background: #161f2a; border-bottom-color: rgba(255, 255, 255, 0.09); } /* Comments — VSCode green, italic. */ pre.code-fence .tok-comment, pre.code-fence .tok-lineComment, pre.code-fence .tok-blockComment { color: #6a9955; font-style: italic; } /* Declaration keywords (let/const/function/class/type/interface/import/export). */ pre.code-fence .tok-keyword, pre.code-fence .tok-moduleKeyword, pre.code-fence .tok-modifier, pre.code-fence .tok-self { color: #569cd6; } /* Control-flow keywords (if/else/for/while/return/switch/await/async). */ pre.code-fence .tok-controlKeyword { color: #c586c0; } /* Operator keywords (typeof/instanceof/in/of/new/delete/void). */ pre.code-fence .tok-operatorKeyword { color: #569cd6; } /* Strings + character + html attribute values — VSCode peach. */ pre.code-fence .tok-string, pre.code-fence .tok-string2, pre.code-fence .tok-character, pre.code-fence .tok-attributeValue { color: #ce9178; } /* Numbers / booleans / null / atoms — VSCode sage. */ pre.code-fence .tok-number, pre.code-fence .tok-integer, pre.code-fence .tok-float, pre.code-fence .tok-bool, pre.code-fence .tok-null, pre.code-fence .tok-atom { color: #b5cea8; } /* Type / class / namespace names — VSCode teal. */ pre.code-fence .tok-typeName, pre.code-fence .tok-className, pre.code-fence .tok-namespace { color: #4ec9b0; } /* HTML/JSX tag names — VSCode blue (matches keyword family). */ pre.code-fence .tok-tagName { color: #569cd6; } /* Variables, properties, attribute names — VSCode light-blue. */ pre.code-fence .tok-variableName, pre.code-fence .tok-propertyName, pre.code-fence .tok-attributeName, pre.code-fence .tok-definition { color: #9cdcfe; } /* Function / method / label names — VSCode yellow. */ pre.code-fence .tok-function, pre.code-fence .tok-functionDefinition, pre.code-fence .tok-macroName, pre.code-fence .tok-labelName { color: #dcdcaa; } /* Punctuation / brackets / operators — foreground gray. */ pre.code-fence .tok-meta, pre.code-fence .tok-processingInstruction, pre.code-fence .tok-punctuation, pre.code-fence .tok-bracket, pre.code-fence .tok-paren, pre.code-fence .tok-brace, pre.code-fence .tok-angleBracket, pre.code-fence .tok-squareBracket, pre.code-fence .tok-separator, pre.code-fence .tok-operator { color: #d4d4d4; } /* Regex literal — VSCode salmon-red. */ pre.code-fence .tok-regexp { color: #d16969; } /* Escape sequence — VSCode tan. */ pre.code-fence .tok-escape { color: #d7ba7d; } /* Markdown link / url — VSCode cornflower, underlined. */ pre.code-fence .tok-link, pre.code-fence .tok-url { color: #3794ff; text-decoration: underline; } /* Headings + emphasis (markdown / asciidoc / rst inside fences). */ pre.code-fence .tok-heading { color: #569cd6; font-weight: 700; } pre.code-fence .tok-emphasis { font-style: italic; } pre.code-fence .tok-strong { font-weight: 700; } /* Light pages draw every fence light, the way VS Code draws its editor and terminal in either theme: the agent box's surface and beige bar, with VS Code's Light+ token colours. A shell block keeps its text in the page's ink. Dark pages keep the Dark+ fence above. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) { background: var(--bg); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(16, 40, 61, 0.04), 0 12px 32px rgba(16, 40, 61, 0.10); } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) > .code-file { background: #f3f1ec; border-bottom-color: rgba(31, 30, 27, 0.10); color: var(--ink-soft); } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) > .code-file .code-file-note { color: var(--ink-faint, var(--ink-soft)); } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .copy-code-btn, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .copy-code-btn:active, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .copy-code-btn:focus, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .copy-code-btn:focus-visible { color: var(--ink-soft); border-color: var(--rule); } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .copy-code-btn:hover { color: var(--ink); border-color: var(--ink-soft); } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt)::selection, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) ::selection { background: var(--accent-soft, #ebf6fc); color: #10283d; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-comment, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-lineComment, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-blockComment { color: #008000; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-keyword, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-moduleKeyword, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-modifier, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-self, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-operatorKeyword { color: #0000ff; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-controlKeyword { color: #af00db; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-string, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-string2, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-character { color: #a31515; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-attributeValue { color: #0000ff; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-number, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-integer, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-float, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-bool, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-null, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-atom { color: #098658; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-typeName, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-className, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-namespace { color: #267f99; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-tagName, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-heading { color: #800000; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-variableName, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-propertyName, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-definition { color: #001080; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-attributeName { color: #e50000; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-function, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-functionDefinition, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-macroName, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-labelName { color: #795e26; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-meta, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-processingInstruction, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-punctuation, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-bracket, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-paren, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-brace, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-angleBracket, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-squareBracket, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-separator, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-operator { color: var(--ink); } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-regexp { color: #811f3f; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-escape { color: #ee0000; } :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-link, :root:not([data-theme="dark"]) pre.code-fence:not(.is-prompt) .tok-url { color: #0000ff; } :root:not([data-theme="dark"]) pre.is-terminal-block [class*="tok-"], :root:not([data-theme="dark"]) pre.is-console [class*="tok-"] { color: inherit; } :root:not([data-theme="dark"]) pre.is-terminal-block .tok-comment, :root:not([data-theme="dark"]) pre.is-terminal-block .tok-lineComment, :root:not([data-theme="dark"]) pre.is-console .tok-comment, :root:not([data-theme="dark"]) pre.is-console .tok-lineComment { color: var(--ink-soft); } } :root[data-theme="light"] pre.code-fence:not(.is-prompt) { background: var(--bg); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(16, 40, 61, 0.04), 0 12px 32px rgba(16, 40, 61, 0.10); } :root[data-theme="light"] pre.code-fence:not(.is-prompt) > .code-file { background: #f3f1ec; border-bottom-color: rgba(31, 30, 27, 0.10); color: var(--ink-soft); } :root[data-theme="light"] pre.code-fence:not(.is-prompt) > .code-file .code-file-note { color: var(--ink-faint, var(--ink-soft)); } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .copy-code-btn, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .copy-code-btn:active, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .copy-code-btn:focus, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .copy-code-btn:focus-visible { color: var(--ink-soft); border-color: var(--rule); } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .copy-code-btn:hover { color: var(--ink); border-color: var(--ink-soft); } :root[data-theme="light"] pre.code-fence:not(.is-prompt)::selection, :root[data-theme="light"] pre.code-fence:not(.is-prompt) ::selection { background: var(--accent-soft, #ebf6fc); color: #10283d; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-comment, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-lineComment, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-blockComment { color: #008000; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-keyword, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-moduleKeyword, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-modifier, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-self, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-operatorKeyword { color: #0000ff; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-controlKeyword { color: #af00db; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-string, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-string2, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-character { color: #a31515; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-attributeValue { color: #0000ff; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-number, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-integer, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-float, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-bool, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-null, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-atom { color: #098658; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-typeName, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-className, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-namespace { color: #267f99; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-tagName, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-heading { color: #800000; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-variableName, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-propertyName, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-definition { color: #001080; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-attributeName { color: #e50000; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-function, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-functionDefinition, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-macroName, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-labelName { color: #795e26; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-meta, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-processingInstruction, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-punctuation, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-bracket, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-paren, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-brace, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-angleBracket, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-squareBracket, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-separator, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-operator { color: var(--ink); } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-regexp { color: #811f3f; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-escape { color: #ee0000; } :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-link, :root[data-theme="light"] pre.code-fence:not(.is-prompt) .tok-url { color: #0000ff; } :root[data-theme="light"] pre.is-terminal-block [class*="tok-"], :root[data-theme="light"] pre.is-console [class*="tok-"] { color: inherit; } :root[data-theme="light"] pre.is-terminal-block .tok-comment, :root[data-theme="light"] pre.is-terminal-block .tok-lineComment, :root[data-theme="light"] pre.is-console .tok-comment, :root[data-theme="light"] pre.is-console .tok-lineComment { color: var(--ink-soft); }