/* Chroma 语法高亮令牌色（服务端 class 模式）。 * 容器 padding/圆角/背景见 main.css 的 pre / .highlight； * 此处只定义令牌前景色。亮色参考 github，暗色参考 github-dark。 * pre.chroma 因带 class 不匹配 pre:not([class])，补 var(--block) 背景。 */ /* main.css 容器规则绑在 pre:not([class])，chroma 带 class 需桥接同等背景/内边距 */ pre.chroma { margin: var(--gap-p) 0; border-radius: 16px; overflow: auto; display: block; padding: 1rem; background: var(--block); font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; box-sizing: border-box; } pre.chroma code { padding: 0; } /* —— 亮色（默认）—— */ :root .chroma .err { color: #f6f8fa; } /* Error */ :root .chroma .k { color: #cf222e; } /* Keyword */ :root .chroma .kc { color: #cf222e; } :root .chroma .kd { color: #cf222e; } :root .chroma .kn { color: #cf222e; } :root .chroma .kp { color: #cf222e; } :root .chroma .kr { color: #cf222e; } :root .chroma .kt { color: #cf222e; } /* KeywordType */ :root .chroma .n { color: #1f2328; } /* Name */ :root .chroma .na { color: #1f2328; } /* NameAttribute */ :root .chroma .nb { color: #6639ba; } /* NameBuiltin */ :root .chroma .bp { color: #6a737d; } /* NameBuiltinPseudo */ :root .chroma .nc { color: #1f2328; } /* NameClass */ :root .chroma .no { color: #0550ae; } /* NameConstant */ :root .chroma .nd { color: #0550ae; } /* NameDecorator */ :root .chroma .ni { color: #6639ba; } /* NameEntity */ :root .chroma .ne { color: #cf222e; } /* NameException */ :root .chroma .nf { color: #6639ba; } /* NameFunction */ :root .chroma .fm { color: #6639ba; } :root .chroma .nl { color: #990000; font-weight: bold; } /* NameLabel */ :root .chroma .nn { color: #24292e; } /* NameNamespace */ :root .chroma .nx { color: #1f2328; } /* NameOther */ :root .chroma .py { color: #1f2328; } :root .chroma .nt { color: #0550ae; } /* NameTag */ :root .chroma .nv { color: #953800; } /* NameVariable */ :root .chroma .vc { color: #953800; } :root .chroma .vg { color: #953800; } :root .chroma .vi { color: #953800; } :root .chroma .vm { color: #953800; } :root .chroma .l { color: #0550ae; } /* Literal */ :root .chroma .ld { color: #0550ae; } :root .chroma .s { color: #0a3069; } /* LiteralString */ :root .chroma .sa { color: #0a3069; } :root .chroma .sb { color: #0a3069; } :root .chroma .sc { color: #0a3069; } :root .chroma .dl { color: #0a3069; } :root .chroma .sd { color: #0a3069; } :root .chroma .s2 { color: #0a3069; } :root .chroma .se { color: #0a3069; } :root .chroma .sh { color: #0a3069; } :root .chroma .si { color: #0a3069; } :root .chroma .sx { color: #0a3069; } :root .chroma .sr { color: #0a3069; } /* LiteralStringRegex */ :root .chroma .s1 { color: #0a3069; } :root .chroma .ss { color: #032f62; } /* LiteralStringSymbol */ :root .chroma .m { color: #0550ae; } /* LiteralNumber */ :root .chroma .mb { color: #0550ae; } :root .chroma .mf { color: #0550ae; } :root .chroma .mh { color: #0550ae; } :root .chroma .mi { color: #0550ae; } :root .chroma .il { color: #0550ae; } :root .chroma .mo { color: #0550ae; } :root .chroma .o { color: #0550ae; } /* Operator */ :root .chroma .ow { color: #0550ae; } :root .chroma .p { color: #1f2328; } /* Punctuation */ :root .chroma .c { color: #57606a; } /* Comment */ :root .chroma .ch { color: #57606a; } :root .chroma .cm { color: #57606a; } :root .chroma .cp { color: #57606a; } :root .chroma .cpf { color: #57606a; } :root .chroma .c1 { color: #57606a; } :root .chroma .cs { color: #57606a; } :root .chroma .gd { color: #82071e; background-color: #ffebe9; } /* GenericDeleted */ :root .chroma .ge { color: #1f2328; font-style: italic; } :root .chroma .gr { color: #cf222e; } :root .chroma .gh { color: #0550ae; font-weight: bold; } :root .chroma .gi { color: #116329; background-color: #dafbe1; } /* GenericInserted */ :root .chroma .go { color: #1f2328; } :root .chroma .gp { color: #57606a; } :root .chroma .gs { font-weight: bold; } :root .chroma .gu { color: #0550ae; } :root .chroma .gt { color: #cf222e; } :root .chroma .gl { text-decoration: underline; } :root .chroma .w { color: #ffffff; } /* TextWhitespace */ /* —— 暗色 —— */ :root[data-theme="dark"] .chroma .err { color: #f85149; } :root[data-theme="dark"] .chroma .k { color: #ff7b72; } :root[data-theme="dark"] .chroma .kc { color: #79c0ff; } :root[data-theme="dark"] .chroma .kd { color: #ff7b72; } :root[data-theme="dark"] .chroma .kn { color: #ff7b72; } :root[data-theme="dark"] .chroma .kp { color: #79c0ff; } :root[data-theme="dark"] .chroma .kr { color: #ff7b72; } :root[data-theme="dark"] .chroma .kt { color: #ff7b72; } :root[data-theme="dark"] .chroma .n { color: #e6edf3; } :root[data-theme="dark"] .chroma .na { color: #e6edf3; } :root[data-theme="dark"] .chroma .nb { color: #e6edf3; } :root[data-theme="dark"] .chroma .bp { color: #e6edf3; } :root[data-theme="dark"] .chroma .nc { color: #f0883e; font-weight: bold; } :root[data-theme="dark"] .chroma .no { color: #79c0ff; font-weight: bold; } :root[data-theme="dark"] .chroma .nd { color: #d2a8ff; font-weight: bold; } :root[data-theme="dark"] .chroma .ni { color: #ffa657; } :root[data-theme="dark"] .chroma .ne { color: #f0883e; font-weight: bold; } :root[data-theme="dark"] .chroma .nf { color: #d2a8ff; font-weight: bold; } :root[data-theme="dark"] .chroma .fm { color: #d2a8ff; font-weight: bold; } :root[data-theme="dark"] .chroma .nl { color: #79c0ff; font-weight: bold; } :root[data-theme="dark"] .chroma .nn { color: #ff7b72; } :root[data-theme="dark"] .chroma .nx { color: #e6edf3; } :root[data-theme="dark"] .chroma .py { color: #79c0ff; } :root[data-theme="dark"] .chroma .nt { color: #7ee787; } :root[data-theme="dark"] .chroma .nv { color: #79c0ff; } :root[data-theme="dark"] .chroma .vc { color: #79c0ff; } :root[data-theme="dark"] .chroma .vg { color: #79c0ff; } :root[data-theme="dark"] .chroma .vi { color: #79c0ff; } :root[data-theme="dark"] .chroma .vm { color: #79c0ff; } :root[data-theme="dark"] .chroma .l { color: #a5d6ff; } :root[data-theme="dark"] .chroma .ld { color: #79c0ff; } :root[data-theme="dark"] .chroma .s { color: #a5d6ff; } :root[data-theme="dark"] .chroma .sa { color: #79c0ff; } :root[data-theme="dark"] .chroma .sb { color: #a5d6ff; } :root[data-theme="dark"] .chroma .sc { color: #a5d6ff; } :root[data-theme="dark"] .chroma .dl { color: #79c0ff; } :root[data-theme="dark"] .chroma .sd { color: #a5d6ff; } :root[data-theme="dark"] .chroma .s2 { color: #a5d6ff; } :root[data-theme="dark"] .chroma .se { color: #79c0ff; } :root[data-theme="dark"] .chroma .sh { color: #79c0ff; } :root[data-theme="dark"] .chroma .si { color: #a5d6ff; } :root[data-theme="dark"] .chroma .sx { color: #a5d6ff; } :root[data-theme="dark"] .chroma .sr { color: #79c0ff; } :root[data-theme="dark"] .chroma .s1 { color: #a5d6ff; } :root[data-theme="dark"] .chroma .ss { color: #a5d6ff; } :root[data-theme="dark"] .chroma .m { color: #a5d6ff; } :root[data-theme="dark"] .chroma .mb { color: #a5d6ff; } :root[data-theme="dark"] .chroma .mf { color: #a5d6ff; } :root[data-theme="dark"] .chroma .mh { color: #a5d6ff; } :root[data-theme="dark"] .chroma .mi { color: #a5d6ff; } :root[data-theme="dark"] .chroma .il { color: #a5d6ff; } :root[data-theme="dark"] .chroma .mo { color: #a5d6ff; } :root[data-theme="dark"] .chroma .o { color: #ff7b72; font-weight: bold; } :root[data-theme="dark"] .chroma .ow { color: #ff7b72; font-weight: bold; } :root[data-theme="dark"] .chroma .p { color: #e6edf3; } :root[data-theme="dark"] .chroma .c { color: #8b949e; font-style: italic; } :root[data-theme="dark"] .chroma .ch { color: #8b949e; font-style: italic; } :root[data-theme="dark"] .chroma .cm { color: #8b949e; font-style: italic; } :root[data-theme="dark"] .chroma .cp { color: #8b949e; font-weight: bold; } :root[data-theme="dark"] .chroma .cpf { color: #8b949e; font-style: italic; } :root[data-theme="dark"] .chroma .c1 { color: #8b949e; font-style: italic; } :root[data-theme="dark"] .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic; } :root[data-theme="dark"] .chroma .g { color: #e6edf3; } :root[data-theme="dark"] .chroma .gd { color: #ffa198; background-color: #490202; } :root[data-theme="dark"] .chroma .ge { font-style: italic; } :root[data-theme="dark"] .chroma .gr { color: #ffa198; } :root[data-theme="dark"] .chroma .gh { color: #79c0ff; font-weight: bold; } :root[data-theme="dark"] .chroma .gi { color: #56d364; background-color: #0f5323; } :root[data-theme="dark"] .chroma .go { color: #8b949e; } :root[data-theme="dark"] .chroma .gp { color: #8b949e; } :root[data-theme="dark"] .chroma .gs { font-weight: bold; } :root[data-theme="dark"] .chroma .gu { color: #79c0ff; } :root[data-theme="dark"] .chroma .gt { color: #ff7b72; } :root[data-theme="dark"] .chroma .gl { text-decoration: underline; } :root[data-theme="dark"] .chroma .w { color: #6e7681; } /* 无显式 data-theme 时跟随系统暗色偏好 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chroma .err { color: #f85149; } :root:not([data-theme="light"]) .chroma .k { color: #ff7b72; } :root:not([data-theme="light"]) .chroma .kc { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .kd { color: #ff7b72; } :root:not([data-theme="light"]) .chroma .kn { color: #ff7b72; } :root:not([data-theme="light"]) .chroma .kp { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .kr { color: #ff7b72; } :root:not([data-theme="light"]) .chroma .kt { color: #ff7b72; } :root:not([data-theme="light"]) .chroma .n { color: #e6edf3; } :root:not([data-theme="light"]) .chroma .na { color: #e6edf3; } :root:not([data-theme="light"]) .chroma .nb { color: #e6edf3; } :root:not([data-theme="light"]) .chroma .bp { color: #e6edf3; } :root:not([data-theme="light"]) .chroma .nc { color: #f0883e; font-weight: bold; } :root:not([data-theme="light"]) .chroma .no { color: #79c0ff; font-weight: bold; } :root:not([data-theme="light"]) .chroma .nd { color: #d2a8ff; font-weight: bold; } :root:not([data-theme="light"]) .chroma .ni { color: #ffa657; } :root:not([data-theme="light"]) .chroma .ne { color: #f0883e; font-weight: bold; } :root:not([data-theme="light"]) .chroma .nf { color: #d2a8ff; font-weight: bold; } :root:not([data-theme="light"]) .chroma .fm { color: #d2a8ff; font-weight: bold; } :root:not([data-theme="light"]) .chroma .nl { color: #79c0ff; font-weight: bold; } :root:not([data-theme="light"]) .chroma .nn { color: #ff7b72; } :root:not([data-theme="light"]) .chroma .nx { color: #e6edf3; } :root:not([data-theme="light"]) .chroma .py { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .nt { color: #7ee787; } :root:not([data-theme="light"]) .chroma .nv { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .vc { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .vg { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .vi { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .vm { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .l { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .ld { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .s { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .sa { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .sb { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .sc { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .dl { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .sd { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .s2 { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .se { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .sh { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .si { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .sx { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .sr { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .s1 { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .ss { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .m { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .mb { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .mf { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .mh { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .mi { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .il { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .mo { color: #a5d6ff; } :root:not([data-theme="light"]) .chroma .o { color: #ff7b72; font-weight: bold; } :root:not([data-theme="light"]) .chroma .ow { color: #ff7b72; font-weight: bold; } :root:not([data-theme="light"]) .chroma .p { color: #e6edf3; } :root:not([data-theme="light"]) .chroma .c { color: #8b949e; font-style: italic; } :root:not([data-theme="light"]) .chroma .ch { color: #8b949e; font-style: italic; } :root:not([data-theme="light"]) .chroma .cm { color: #8b949e; font-style: italic; } :root:not([data-theme="light"]) .chroma .cp { color: #8b949e; font-weight: bold; } :root:not([data-theme="light"]) .chroma .cpf { color: #8b949e; font-style: italic; } :root:not([data-theme="light"]) .chroma .c1 { color: #8b949e; font-style: italic; } :root:not([data-theme="light"]) .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic; } :root:not([data-theme="light"]) .chroma .g { color: #e6edf3; } :root:not([data-theme="light"]) .chroma .gd { color: #ffa198; background-color: #490202; } :root:not([data-theme="light"]) .chroma .ge { font-style: italic; } :root:not([data-theme="light"]) .chroma .gr { color: #ffa198; } :root:not([data-theme="light"]) .chroma .gh { color: #79c0ff; font-weight: bold; } :root:not([data-theme="light"]) .chroma .gi { color: #56d364; background-color: #0f5323; } :root:not([data-theme="light"]) .chroma .go { color: #8b949e; } :root:not([data-theme="light"]) .chroma .gp { color: #8b949e; } :root:not([data-theme="light"]) .chroma .gs { font-weight: bold; } :root:not([data-theme="light"]) .chroma .gu { color: #79c0ff; } :root:not([data-theme="light"]) .chroma .gt { color: #ff7b72; } :root:not([data-theme="light"]) .chroma .gl { text-decoration: underline; } :root:not([data-theme="light"]) .chroma .w { color: #6e7681; } }