我克隆了 reveal.js 的 git repo，将 js、css、plugin 和 lib 目录复制到/my-home-dir/ 并创建了一个名为 r.html 的示例页面.
在r.html我有一个 <pre><code></code></pre> block ，但它没有突出显示......据我所知，这是默认行为。我继续更改 reveal.js 的初始化来帮助解决这个问题，但没有任何改变。 (否则主题和幻灯片都很好)
有什么建议吗？
r.html 的代码如下:
<!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>
来自 firefox“浏览器”控制台的日志:
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.
最佳答案
正如您已经发现的，您需要加载一个带有突出显示样式的 CSS 文件。这可以是包含在 Reveal.js 发行版中的 zenburn.css 或 other CSS file由 Highlight.js 支持:
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
关于javascript - Reveal.js 中的语法高亮代码如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23793448/