1

我正在使用 Reveal.js 2.6.1，并且正在尝试使用外部降价文件来正确呈现演讲者笔记中的代码块。

我的幻灯片看起来像：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
    <link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="/javascripts/html5shiv.js" type="text/javascript"></script>
  </head>

  <body class="index">
    <div class='reveal'>
      <div class='slides'>
        <section data-charset='utf-8' data-markdown='basics/basics.html' data-notes='^Notes:' data-vertical='^_' id='basics'></section>
      </div>
    </div>

    <script src="/javascripts/head.min.js" type="text/javascript"></script>
    <script src="/javascripts/reveal.min.js" type="text/javascript"></script>

    <script>
      // Full list of configuration options available here:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,
        rollingLinks: false,

        theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
        transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

        // Optional libraries used to extend on reveal.js
        dependencies: [
          { src: 'javascripts/classList.js', condition: function() { return !document.body.classList; } },
          { src: 'javascripts/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'javascripts/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'javascripts/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'javascripts/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
          { src: 'javascripts/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }
        ]
      });
    </script>
  </body>
</html>

外部降价文件是：

## Title

- Foo
- Bar
```
{foo: bar}
```

Notes:
```
{foo: bar}
```

大部分事情都在工作（文件被加载，markdown 被转换），但注释中的代码块被呈现为内联代码片段：

<p><code>var foo = 'bar';</code></p>

而不是像幻灯片中那样作为代码块：

<pre><code>var foo = 'bar';</code></pre>

更新：

在注释中使用 markdown 中的代码块而不使用外部文件，可以正常工作：

<section>
  <h2>Test</h2>
  <aside class='notes' data-markdown>
    ```
    {a: b};
    return true;
    ```
  </aside>
</section>

有任何想法吗？

谢谢

4

1 回答 1

1

使用reveal 3.0.0，一个简单的修复是在index.html中替换：

{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } }, 和 { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return true; }, callback: function() { hljs.initHighlightingOnLoad(); } },

这迫使 highlight.js 的异步加载有效地修复了代码块中缺少的突出显示。

于 2015-02-20T13:37:11.980 回答