| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- /**
- * 代码块视觉样式:highlight.js 深色主题(基于 github-dark 配色精简版) + 滚动条美化。
- *
- * <p>hljs 主题:仅定义代码 token 的前景色;背景与 padding 交由调用方控制
- * (`.nrc-var-value.md-body :deep(pre)` / `.assistant-md :deep(pre)` 等),
- * 避免与深色主题的 pre 容器背景冲突。
- *
- * <p>滚动条:为所有 {@code <pre>} 元素(包括 hljs 渲染的代码块和其他预格式化文本)
- * 统一提供与深色主题协调的滚动条样式,覆盖 {@code assets/styles/global.css} 的全局默认。
- *
- * <p>使用:在 {@code utils/markdown.js} 中 {@code import './styles/hljs-theme.css'}。
- */
- .hljs {
- color: #c9d1d9;
- background: transparent;
- }
- /* 注释 / 引用 */
- .hljs-comment,
- .hljs-quote {
- color: #8b949e;
- font-style: italic;
- }
- /* 关键字 / 标签属性 */
- .hljs-keyword,
- .hljs-selector-tag,
- .hljs-literal,
- .hljs-type,
- .hljs-name,
- .hljs-attr,
- .hljs-attribute,
- .hljs-variable,
- .hljs-template-variable,
- .hljs-deletion {
- color: #ff7b72;
- }
- /* 字符串 / 正则 / 加号 / 注入 */
- .hljs-string,
- .hljs-regexp,
- .hljs-addition,
- .hljs-symbol,
- .hljs-bullet,
- .hljs-link,
- .hljs-meta .hljs-string {
- color: #a5d6ff;
- }
- /* 数字 / 常量 */
- .hljs-number,
- .hljs-built_in,
- .hljs-builtin-name,
- .hljs-params {
- color: #79c0ff;
- }
- /* 标题 / 类名 / 函数名 / 属性名 */
- .hljs-title,
- .hljs-title.class_,
- .hljs-title.function_,
- .hljs-section {
- color: #d2a8ff;
- }
- /* 标签(HTML/XML) */
- .hljs-tag {
- color: #7ee787;
- }
- /* 元信息 / 强调 */
- .hljs-meta,
- .hljs-emphasis {
- color: #8b949e;
- font-style: italic;
- }
- .hljs-strong {
- color: #c9d1d9;
- font-weight: 700;
- }
- /* 模板标签(如 JSX/TSX 的占位符) */
- .hljs-template-tag {
- color: #ff7b72;
- }
- /* ============== 代码块滚动条美化(深色主题协调) ==============
- * 全局应用:所有 <pre> 元素均使用此滚动条样式,覆盖 assets/styles/global.css
- * 中针对全部元素的默认浅蓝色滚动条。
- * 优先级:`pre::-webkit-scrollbar` (0,0,1,1) > `::-webkit-scrollbar` (0,0,0,1)。
- */
- pre::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- }
- pre::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.04);
- border-radius: 4px;
- }
- pre::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.18);
- border-radius: 4px;
- }
- pre::-webkit-scrollbar-thumb:hover {
- background: rgba(255, 255, 255, 0.30);
- }
- /* Firefox:细滚动条,与 webkit 视觉接近 */
- pre {
- scrollbar-width: thin;
- scrollbar-color: rgba(255, 255, 255, 0.18) rgba(255, 255, 255, 0.04);
- }
|