css - reveal.js中如何更改语法高亮的主题和语言

Question

我正在尝试使用语法高亮显示 reveal.js 中的演示文稿，但我不想使用 zenburn(默认设置)，我想高亮显示用 R 编写的代码。我使用 highlight.js 生成为 R 定制的 css，但问题是 highlight.js 在 html 中用“hljs”表示代码，而 reveal.js 使用“预代码”。例如 highlight.js css 看起来像:

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #fdf6e3;
  color: #657b83;
  -webkit-text-size-adjust: none;
}

虽然 reveal.js 突出显示 css 看起来像:

pre code {
  display: block; padding: 0.5em;
  background: #3F3F3F;
  color: #DCDCDC;
}

reveal 可以为语法高亮显示生成替代主题，还是遍历并更改所有选择器的解决方案？

Answer 1

您可能正在使用受此 GitHub issue 影响的过时版本的 reveal.js .

在这种情况下(如果您无法升级)，您将用最新的稳定版本替换 highlight 的内联缩小版本(在 plugin/highlight/highlight.js 中)。

在所有其他情况下，只需将所需的 higlight css 文件(例如 idea.css)添加到 lib/css 并替换 index.html 中的 zenburn.css 链接。 (例如 <link rel="stylesheet" href="lib/css/idea.css">)

期望.reveal pre code在 reveal 的主题中，CSS 可能会干扰一些高亮样式，因此如果不进行进一步修改，它们可能难以阅读或看起来很糟糕。