如何为Marp幻灯片中的代码块单独套用深色主题语法高亮？

不用重写全部CSS，只需要在你现有的浅色主题自定义CSS里，针对性覆盖代码块的语法高亮样式即可，核心思路是复用Marp内置深色主题的配色规则，只作用于pre和code元素。

方法一：直接追加深色语法高亮规则 #

在你已有的自定义CSS文件末尾，添加以下代码：

/* 保留你之前对浅色主题的微调样式 */
/* ... 你的现有代码 ... */

/* 仅为代码块应用深色语法高亮 */
pre,
pre code {
  background-color: #2d2d2d !important;
  color: #ccc !important;
}

/* 对应不同代码token的配色，完全复用Marp默认深色主题 */
pre .token.comment,
pre .token.block-comment,
pre .token.prolog,
pre .token.doctype,
pre .token.cdata {
  color: #999;
}

pre .token.punctuation {
  color: #ccc;
}

pre .token.tag,
pre .token.attr-name,
pre .token.namespace,
pre .token.deleted {
  color: #e2777a;
}

pre .token.function-name {
  color: #6196cc;
}

pre .token.boolean,
pre .token.number,
pre .token.function {
  color: #f08d49;
}

pre .token.property,
pre .token.class-name,
pre .token.constant,
pre .token.symbol {
  color: #f8c555;
}

pre .token.selector,
pre .token.important,
pre .token.atrule,
pre .token.keyword,
pre .token.builtin {
  color: #cc99cd;
}

pre .token.string,
pre .token.char,
pre .token.attr-value,
pre .token.regex,
pre .token.variable {
  color: #7ec699;
}

pre .token.operator,
pre .token.entity,
pre .token.url {
  color: #67cdcc;
}

pre .token.important,
pre .token.bold {
  font-weight: bold;
}
pre .token.italic {
  font-style: italic;
}

pre .token.entity {
  cursor: help;
}

pre .token.inserted {
  color: green;
}

方法二：用CSS变量更优雅维护 #

如果你的Marp版本支持CSS变量，可以通过定义变量的方式，更方便地切换配色：

/* 保留现有浅色主题微调 */
/* ... 你的现有代码 ... */

/* 定义深色语法高亮的CSS变量 */
pre {
  --code-bg: #2d2d2d;
  --code-text: #ccc;
  --code-comment: #999;
  --code-punctuation: #ccc;
  --code-tag: #e2777a;
  --code-function: #6196cc;
  --code-number: #f08d49;
  --code-constant: #f8c555;
  --code-keyword: #cc99cd;
  --code-string: #7ec699;
}

/* 应用变量到代码块 */
pre, pre code {
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
}

pre .token.comment { color: var(--code-comment) !important; }
pre .token.punctuation { color: var(--code-punctuation) !important; }
pre .token.tag { color: var(--code-tag) !important; }
pre .token.function-name { color: var(--code-function) !important; }
pre .token.number { color: var(--code-number) !important; }
pre .token.constant { color: var(--code-constant) !important; }
pre .token.keyword { color: var(--code-keyword) !important; }
pre .token.string { color: var(--code-string) !important; }

说明 #

• 两种方法都不需要修改你现有的浅色主题核心样式，只追加代码即可。
• 使用!important是为了确保深色样式能覆盖浅色主题默认的代码块样式。
• 配色完全沿用Marp官方深色主题的语法高亮风格，保证视觉统一。

内容的提问来源于stack exchange，提问作者helle