slara / generator-reveal

Yeoman generator for Reveal.js
MIT License
429 stars 52 forks source link

Added dependency to reveal-highlight-themes. #57

Closed nwinkler closed 10 years ago

nwinkler commented 10 years ago

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.

coveralls commented 10 years ago

Coverage Status

Coverage remained the same when pulling 8c651c68f7e086e65a23ac4690580c150a76d6b4 on nwinkler:highlight-themes into 8b33581f3b006cccc5e20f5b266f58fba7c2d6e8 on slara:master.

janraasch commented 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)?

nwinkler commented 10 years ago

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.

janraasch commented 10 years ago

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.

nwinkler commented 10 years ago

Yes, I've seen that. I'll look into that, but I wanted to start here, since it seemed to be an easy change.

janraasch commented 10 years ago

Sounds good. What do you think @slara? Worth the extra dependency?

slara commented 10 years ago

Sounds really good to me :+1:

nwinkler commented 10 years ago

Thanks!

janraasch commented 10 years ago

Thank you.