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

Posted 2023-03-30

【中文标题】如何更改reveal.js中语法高亮的主题和语言

【英文标题】：How to change the theme and language of syntax highlighting in reveal.js

【发布时间】：2014-12-02 20:03:51

【问题描述】：

我正在尝试在reveal.js 中使用语法高亮显示演示文稿，但我不想使用zenburn（默认）并且我想高亮用R 编写的代码。我使用highlight.js 来生成为 R 定制的 css，但问题是 highlight.js 用“hljs”表示 html 中的代码，而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;

是否可以为语法高亮显示生成替代主题，或者是通过并更改所有选择器的解决方案？

【参考方案1】：

您可能正在开发受此GitHub issue 影响的过时版本的reveal.js。

在这种情况下（如果您无法升级），您可以用最新的稳定版本替换高亮的内联缩小版本（plugin/highlight/highlight.js）。

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

预计显示主题 css 中的 .reveal pre code 可能会干扰某些突出显示样式，因此如果不进行进一步修改，它们可能难以阅读或看起来很糟糕。

【讨论】：

谢谢，我已内联信息并删除了链接。我还澄清了当前的reveal.js 版本不需要这种解决方法。

链接本身还不错，但是您必须在答案中以某种方式解释解决方案的核心，即使没有链接也很有用。链接往往会腐烂，如果发生这种情况，如果没有链接，您的答案将一文不值。