How to change the theme and language of syntax highlighting in reveal.js

Question

I'm trying to use the syntax highlighting for a presentation in reveal.js, but I don't want to use zenburn (the default) and I want to highlight code written in R. I used highlight.js to produce css customized for R but the issue is that highlight.js denotes code in html with 'hljs' while reveal.js uses 'pre code.' For example highlight.js css looks like:

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

While reveal.js highlighting css looks like:

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

Can reveal generate alternate themes for syntax highlighting, or is the solution to go through and change all the selectors?

Answer 1

You may be working on an outdated version of reveal.js that is affected by this GitHub issue.

In this case (and if you cannot upgrade) you would replace the inlined minified version of highlight (in plugin/highlight/highlight.js) by the latest stable version.

In all other cases just add the desired higlight css file (e.g. idea.css) to lib/css and replace the zenburn.css link in index.html (by e.g. <link rel="stylesheet" href="lib/css/idea.css">)

Expect that .reveal pre code in reveal's theme css may interfere with some highlight styles so they may be hard to read or look bad without further modifications.