带有代码的演示文稿在底部被截断

Question

我正在准备一个 Reveal.js 演示文稿，我想在其中展示一些代码行。

如果我只有一张包含代码的幻灯片，它将显示在带有滚动条的面板中，其中包含完整的代码：

但是，如果我在代码块前面加上标题：

<section id="slide-12">
<h3>Example 1: my first d3 visualization</h3>
<pre><code>
&lt;!DOCTYPE html&gt;
  <meta charset="utf-8"> <!-- also save this file as unicode-8 ! -->
  &lt;head&gt;
    <script src="http://d3js.org/d3.v3.js"></script>
  &lt;/head&gt;

  &lt;body&gt;
    <h1>My meetup groups are:</h1>
    <svg width="500" height="500"></svg>

    <script>    
      var meetupGroupSizes = [1943, 1073, 297];

      function display(mydata){
        var anchor = d3.select("svg");

        selection = anchor.selectAll("circle")
          .data(mydata);

        selection.style("fill", "orange"); // update selection

        selection.enter() // enter selection
          .append("circle")
          .attr("cx", function (d, i) { return (i + 1) * 100;})
          .attr("cy", 300)
          .attr("r", 0)
          .style("fill", "white")
          .transition()
          .delay( function(d, i) { return i * 500;} )
          .duration(2000)
          .attr("r", function(d) { return Math.sqrt(d / Math.PI);})
          .style("fill", "steelblue");

        selection.exit() // exit selection
          .remove();
      }

      display(meetupGroupSizes);      
    </script>
  &lt;/body&gt;
&lt;/html&gt;

</code></pre>

</section>

然后可滚动代码面板的内容在底部被切断（/html 标签丢失）。

结果是这样的：

我有两个问题：1）如何在标题之后显示完整的代码块？2）如何在没有可滚动面板的情况下显示代码块（减小字体大小）？

Answer 1

1）如何在标题之后显示完整的代码块？

我的猜测是max-height该代码块的 导致它离开页面。我使用带有 Reveal 的 Markdown，所以我没有与你完全相同的设置。然而，使用 Google Chrome 中的检查功能，我能够看到我的代码块的高度来自 Reveal 主题的 CSS（在我的例子中是beige.css）：

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal;
  }

我不确定你正在使用什么主题，但如果你可以覆盖该max-height值并使其变小（按 H1 的高度），它应该可以使可滚动区域适合。

2）如何在没有可滚动面板的情况下显示代码块（减小字体大小）？

就我而言，它再次与 相关beige.css，即font-size：

.reveal pre {
    [...]
    font-size: 0.55em;
    [...]
}

我在 Chrome 的“检查”视图中减小了该值，直到所有文本都适合我的代码块。然后你只需要获取该数字并弄清楚如何覆盖它。

将您的两个问题放在一起，以下假设max-height:300px和font-size:0.35em是正确的值（但它们取决于您的主题）：

<pre><code style="max-height:300px;font-size:0.35em">
...
</code></pre>