語法高亮顯示Reveal.js中的代碼如何？

我克隆reveal.js的git倉庫，複製JS，CSS，插件和LIB目錄/我的家庭-DIR/並創建了r.html採樣頁面。語法高亮顯示Reveal.js中的代碼如何？

在r.html我有一個<pre><code></code></pre>塊，但它沒有突出顯示......這是默認的行爲，據我所知。我繼續前進並更改了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>

從火狐「瀏覽器」控制檯日誌：

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.

來源

2014-05-21 fiacobelli

我加入'zenburn.css'作爲樣式表中的一個，並有一些語法高亮....是一個必須？ – fiacobelli

添加zenburn也爲我固定。 – FacePalm

正如你已經發現了，你需要加載CSS文件突出顯示樣式。這可以包括在Reveal.js分佈任zenburn.css或other CSS file通過Highlight.js支持：

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

來源

2015-01-09 18:49:29 vitaut

語法高亮顯示Reveal.js中的代碼如何？

回答

相關問題