Reveal.js: Code highlight not working

Created on 13 Oct 2015 · 1Comment · Source: hakimel/reveal.js

Hi,

I am trying to use highlight.js to highlight code in reveal.js but failed. The HTML's contents are pasted below. It should be some trivial setup error because reveal.js/index.html highlights its code correctly. But I cannot figure out what is wrong. Could you please take a look about the issue?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="author" content="(Yujie Wen)"/>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/reveal.js/3.0.0/css/reveal.css"/>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/reveal.js/3.0.0/css/theme/moon.css" id="theme"/>
<link rel="stylesheet" href=""/>
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
    if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'http://cdn.jsdelivr.net/reveal.js/3.0.0/css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    }
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="sec-title-slide">
<h1></h1>
<h2>Yujie Wen</h2>
<h2><a href="mailto:[email protected]">[email protected]</a></h2>
<h2></h2>
</section>

<section>
<section id="slide-orgheadline1">
<h2 id="orgheadline1"><span class="section-number-2">1</span> sample script</h2>
<div class="org-src-container">

<pre><code class="c++">int i = 0;
</code></pre>
</div>
</section>
</section>
</div>
</div>
<script src="http://cdn.jsdelivr.net/reveal.js/3.0.0/lib/js/head.min.js"></script>
<script src="http://cdn.jsdelivr.net/reveal.js/3.0.0/js/reveal.js"></script>

<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({

controls: true,
progress: true,
history: false,
center: true,
slideNumber: true,
rollingLinks: false,
keyboard: true,
overview: true,

theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
multiplex: {
    secret: '', // null if client
    id: '', // id, obtained from socket.io server
    url: '' // Location of socket.io server
},

// Optional libraries used to extend on reveal.js
dependencies: [
 { src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }]
});
</script>
</body>
</html>

Regards,
Yujie

Source