syntax highlighting code in Reveal.js how to?

fiacobelli picture fiacobelli · May 21, 2014 · Viewed 8.6k times · Source

I cloned reveal.js's 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. I went ahead and changed the initialization of reveal.js to help with this, but nothing changed. (the theme and slide are fine otherwise)

Any suggestions?

The code for r.html 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>

The 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.

Answer

vitaut picture vitaut · Jan 9, 2015

As you've already found out, you need to load a CSS file with highlighting styles. This can be either zenburn.css included in Reveal.js distribution or other CSS file supported by Highlight.js:

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