Menu
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.
554
Syntax highlighting determines the color and style of source code displayed in the Visual Studio Code editor. It is responsible for colorizing keywords like if or for in JavaScript differently than strings and comments and variable names.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
