Closed nwinkler closed 10 years ago
Hi @nwinkler,
just for my understanding. What exactly does
Reveal.js internally uses Highlight.js for syntax highlighting in code blocks, but uses a slightly different format for the CSS.
mean (from the readme
of https://github.com/nwinkler/reveal-highlight-themes)?
Good point.
Here's an example, the first couple of lines of the zenburn.css
file.
Original Highlight.js file (https://github.com/isagalaev/highlight.js/blob/master/src/styles/zenburn.css):
.hljs-keyword,
.hljs-tag,
.css .hljs-class,
.css .hljs-id,
.lisp .hljs-title,
.nginx .hljs-title,
.hljs-request,
.hljs-status,
.clojure .hljs-attribute {
color: #e3ceab;
}
The expected Reveal.js format (https://github.com/hakimel/reveal.js/blob/master/lib/css/zenburn.css):
pre .keyword,
pre .tag,
pre .css .class,
pre .css .id,
pre .lisp .title,
pre .nginx .title,
pre .request,
pre .status,
pre .clojure .attribute {
color: #E3CEAB;
}
As you can see, the original Highlight.js themes use hljs-
as a prefix for each class, while Reveal.js uses all of the classes in the context of a pre
tag.
The reveal-highlight-themes project repackages the Highlight.js themes in the latter format. If you drop one of the original Highlight.js files into a Reveal.js presentation, syntax highlighting will not work.
I see. That is cool. Have you thought about firing up a pr at the main reveal-js repository?
Seems like (see https://github.com/hakimel/reveal.js/issues/576) the default highlight theme is currently maintained over there by hand.
Yes, I've seen that. I'll look into that, but I wanted to start here, since it seemed to be an easy change.
Sounds good. What do you think @slara? Worth the extra dependency?
Sounds really good to me :+1:
Thanks!
Thank you.
This will pull in the available Highlight.js themes as a Bower dependency and make them available for usage in the presentation.
The available syntax themes can be found in the
bower_components/reveal-highlight-themes/styles
folder and can be selected by changing the stylesheet reference in the_index.html
file in the generated presentation.