Код подсветки синтаксиса в Reveal.js как?

Я клонировал git-репозиторий show.js, скопировал каталоги js,css,plugin и lib в /my-home-dir/ и создал образец страницы под названием r.html,

В r.html у меня есть <pre><code></code></pre> блок, но он не выделен... как я понимаю, это поведение по умолчанию. Я пошел дальше и изменил инициализацию show.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.
Источник

1 ответ

Как вы уже узнали, вам нужно загрузить CSS-файл с выделенными стилями. Это может быть либо zenburn.css включены в дистрибутив Reveal.js или другой файл CSS, поддерживаемый Highlight.js:

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css">
Источник
Другие вопросы по тегам