Geek Answers Handbook

Syntax highlighting code in Reveal.js how?

I cloned show.js git repo, copied the js , css , plugin and lib directories to / my-home-dir / and created a sample page called r.html .

In r.html , I have a <pre><code></code></pre> block, but it is not highlighted ... which is the default behavior, as I understand it. I went ahead and changed the initialization of opens.js to help with this, but nothing has changed. (theme and slide are ok)

Any suggestions?

The r.html code is below:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Reveal.js 3 Slide Demo</title> <link rel="stylesheet" href="css/reveal.min.css"> <link rel="stylesheet" href="css/theme/default.css" id="theme"> <!--Add support for earlier versions of Internet Explorer --> <!--[if lt IE 9]> <script src="lib/js/html5shiv.js"></script> <![endif]--> </head> <body> <!-- Wrap the entire slide show in a div using the "reveal" class. --> <div class="reveal"> <!-- Wrap all slides in a single "slides" class --> <div class="slides"> <!-- ALL SLIDES GO HERE --> <!-- Each section element contains an individual slide --> <section> This is my code <pre><code> System.out.println("What is this?"); String p = "this is p"; </code></pre> </section> </div> </div> <script src="lib/js/head.min.js"></script> <script src="js/reveal.min.js"></script> <script> // Required, even if empty. Reveal.initialize({ dependencies: [ // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/ { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, // Interpret Markdown in <section> elements { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, // Syntax highlight for <code> elements { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, // Zoom in and out with Alt+click { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, // Speaker notes { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); </script> </body> </html>

Log from the Firefox browser console:

 file:///Users/my-home-dir/www/r.html file:///Users/my-home-dir/www/css/reveal.min.css file:///Users/my-home-dir/core/www/css/theme/default.css file:///Users/my-home-dir/www/lib/js/head.min.js file:///Users/my-home-dir/www/js/reveal.min.js Unknown pseudo-class or pseudo-element 'selection'. Ruleset ignored due to bad selector. reveal.min.css:7 Unknown property 'hyphens'. Declaration dropped. reveal.min.css:7 Error in parsing value for 'display'. Declaration dropped. reveal.min.css:7 Error in parsing value for 'min-height'. Declaration dropped. reveal.min.css:7 Error in parsing value for 'background'. Declaration dropped. default.css:20 Error in parsing value for 'background'. Declaration dropped. default.css:21 Error in parsing value for 'background'. Declaration dropped. default.css:22 Error in parsing value for 'background'. Declaration dropped. default.css:23 Expected color but found 'center'. Error in parsing value for 'background'. Declaration dropped. default.css:24 Unknown pseudo-class or pseudo-element 'selection'. Ruleset ignored due to bad selector. default.css:34 GET https://fonts.googleapis.com/css [HTTP/1.1 200 OK 20ms] file:///Users/my-home-dir/www/plugin/highlight/highlight.js file:///Users/my-home-dir/www/plugin/zoom-js/zoom.js file:///Users/my-home-dir/www/plugin/notes/notes.js Error in parsing value for 'width'. Declaration dropped.
+7
javascript syntax-highlighting
source share
1 answer

As you already learned, you need to load the CSS file using selection styles. This can be either zenburn.css included in the Reveal.js distribution, or another CSS file supported by Highlight.js:

  <!-- For syntax highlighting --> <link rel="stylesheet" href="lib/css/zenburn.css">
+9
source share

More articles:


All Articles