hljs-theme.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. /**
  2. * 代码块视觉样式:highlight.js 深色主题(基于 github-dark 配色精简版) + 滚动条美化。
  3. *
  4. * <p>hljs 主题:仅定义代码 token 的前景色;背景与 padding 交由调用方控制
  5. * (`.nrc-var-value.md-body :deep(pre)` / `.assistant-md :deep(pre)` 等),
  6. * 避免与深色主题的 pre 容器背景冲突。
  7. *
  8. * <p>滚动条:为所有 {@code <pre>} 元素(包括 hljs 渲染的代码块和其他预格式化文本)
  9. * 统一提供与深色主题协调的滚动条样式,覆盖 {@code assets/styles/global.css} 的全局默认。
  10. *
  11. * <p>使用:在 {@code utils/markdown.js} 中 {@code import './styles/hljs-theme.css'}。
  12. */
  13. .hljs {
  14. color: #c9d1d9;
  15. background: transparent;
  16. }
  17. /* 注释 / 引用 */
  18. .hljs-comment,
  19. .hljs-quote {
  20. color: #8b949e;
  21. font-style: italic;
  22. }
  23. /* 关键字 / 标签属性 */
  24. .hljs-keyword,
  25. .hljs-selector-tag,
  26. .hljs-literal,
  27. .hljs-type,
  28. .hljs-name,
  29. .hljs-attr,
  30. .hljs-attribute,
  31. .hljs-variable,
  32. .hljs-template-variable,
  33. .hljs-deletion {
  34. color: #ff7b72;
  35. }
  36. /* 字符串 / 正则 / 加号 / 注入 */
  37. .hljs-string,
  38. .hljs-regexp,
  39. .hljs-addition,
  40. .hljs-symbol,
  41. .hljs-bullet,
  42. .hljs-link,
  43. .hljs-meta .hljs-string {
  44. color: #a5d6ff;
  45. }
  46. /* 数字 / 常量 */
  47. .hljs-number,
  48. .hljs-built_in,
  49. .hljs-builtin-name,
  50. .hljs-params {
  51. color: #79c0ff;
  52. }
  53. /* 标题 / 类名 / 函数名 / 属性名 */
  54. .hljs-title,
  55. .hljs-title.class_,
  56. .hljs-title.function_,
  57. .hljs-section {
  58. color: #d2a8ff;
  59. }
  60. /* 标签(HTML/XML) */
  61. .hljs-tag {
  62. color: #7ee787;
  63. }
  64. /* 元信息 / 强调 */
  65. .hljs-meta,
  66. .hljs-emphasis {
  67. color: #8b949e;
  68. font-style: italic;
  69. }
  70. .hljs-strong {
  71. color: #c9d1d9;
  72. font-weight: 700;
  73. }
  74. /* 模板标签(如 JSX/TSX 的占位符) */
  75. .hljs-template-tag {
  76. color: #ff7b72;
  77. }
  78. /* ============== 代码块滚动条美化(深色主题协调) ==============
  79. * 全局应用:所有 <pre> 元素均使用此滚动条样式,覆盖 assets/styles/global.css
  80. * 中针对全部元素的默认浅蓝色滚动条。
  81. * 优先级:`pre::-webkit-scrollbar` (0,0,1,1) > `::-webkit-scrollbar` (0,0,0,1)。
  82. */
  83. pre::-webkit-scrollbar {
  84. width: 8px;
  85. height: 8px;
  86. }
  87. pre::-webkit-scrollbar-track {
  88. background: rgba(255, 255, 255, 0.04);
  89. border-radius: 4px;
  90. }
  91. pre::-webkit-scrollbar-thumb {
  92. background: rgba(255, 255, 255, 0.18);
  93. border-radius: 4px;
  94. }
  95. pre::-webkit-scrollbar-thumb:hover {
  96. background: rgba(255, 255, 255, 0.30);
  97. }
  98. /* Firefox:细滚动条,与 webkit 视觉接近 */
  99. pre {
  100. scrollbar-width: thin;
  101. scrollbar-color: rgba(255, 255, 255, 0.18) rgba(255, 255, 255, 0.04);
  102. }