语法高亮显示Reveal.js中的代码如何？

Question

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 . 我克隆了reveal.js的git repo，将js ， css ， plugin和lib目录复制到/ my-home-dir /并创建了一个名为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. 在r.html我有一个<pre><code></code></pre>块，但它没有突出显示...这是我理解的默认行为。 I went ahead and changed the initialization of reveal.js to help with this, but nothing changed. 我继续并改变了reveal.js的初始化以帮助解决这个问题，但没有任何改变。 (the theme and slide are fine otherwise) （主题和幻灯片都没问题）

Any suggestions? 有什么建议？

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

The log from the firefox "browser" console: 来自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.

Answer 1

As you've already found out, you need to load a CSS file with highlighting styles. 正如您已经发现的那样，您需要加载带有突出显示样式的CSS文件。 This can be either zenburn.css included in Reveal.js distribution or other CSS file supported by Highlight.js: 这可以是Reveal.js发行zenburn.css包含的zenburn.css或Highlight.js支持的其他CSS文件：

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

语法高亮显示Reveal.js中的代码如何？

问题描述

1 个解决方案

解决方案1
9 2015-01-09 18:49:29

语法高亮显示Reveal.js中的代码如何？

问题描述

1 个解决方案

解决方案1 9 2015-01-09 18:49:29

解决方案1
9 2015-01-09 18:49:29