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

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

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

但是，如果在代码块前面有一个标头：

<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>

示例1：我的第一个d3可视化

!DOCTYPE html
头
/头
身体
我的聚会小组是：
var meetupGroupSizes=[19431073297]；
功能显示（mydata）{
var anchor=d3.选择（“svg”）；
选择=锚定。选择全部（“圆”）
.数据（mydata）；
selection.style（“填充”、“橙色”）；//更新所选内容
selection.enter（）//输入selection
.附加（“圆圈”）
.attr（“cx”，函数（d，i）{return（i+1）*100；}）
.attr（“cy”，300）
.attr（“r”，0）
.样式（“填充”、“白色”）
.transition（）
.delay（函数（d，i）{返回i*500；}）
.期限（2000年）
.attr（“r”，函数（d）{return Math.sqrt（d/Math.PI）；}）
.样式（“填充”、“钢蓝”）；
selection.exit（）//退出选择
.remove（）；
}
显示（会议组大小）；
/身体
/html

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

结果是：

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

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

我的猜测是该代码块的

最大高度

导致它离开页面。我在展示中使用降价，所以我没有和你完全相同的设置。然而，使用Google Chrome中的Inspect功能，我可以看到我的代码块的高度来自于展示主题的CSS（在我的例子中，它是

米色.CSS

）：

。显示预编码{
显示：块；
填充物：5px；
溢出：自动；
最大高度：400px；
换字：正常；
}

我不确定您使用的主题是什么，但是如果您可以覆盖

max height

值并将其缩小（通过H1的高度），它应该可以使可滚动区域适合

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

在我的例子中，它再次与

米色.css相关，即
字体大小
：

。显示预处理{
[...]
字号：0.55em；
[...]
}

我在Chrome的Inspect视图中减小了这个值，直到所有文本都适合我的代码块。然后你只需要取下这个数字，并找出如何覆盖它

将两个问题放在一起，以下假设
最大高度：300px
和
字体大小：0.35em
是正确的值（但它们将取决于您的主题）：


...