title: Presentation with code is cut off at the bottom
body: <p>I am preparing a presentation with reveal.js where I would like to show some lines of code.</p>
  
  <p>If I just have a slide with the code, it is shown in a panel with a scrollbar containing the complete code:
  <a href="https://i.stack.imgur.com/lbykC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lbykC.png" alt="enter image description here"></a></p>
  
  <p>However, If I am preceding the code block with a header:</p>
  
  <pre><code>&lt;section id="slide-12"&gt;
  &lt;h3&gt;Example 1: my first d3 visualization&lt;/h3&gt;
  &lt;pre&gt;&lt;code&gt;
  &amp;lt;!DOCTYPE html&amp;gt;
    &lt;meta charset="utf-8"&gt; &lt;!-- also save this file as unicode-8 ! --&gt;
    &amp;lt;head&amp;gt;
      &lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt;
    &amp;lt;/head&amp;gt;
  
    &amp;lt;body&amp;gt;
      &lt;h1&gt;My meetup groups are:&lt;/h1&gt;
      &lt;svg width="500" height="500"&gt;&lt;/svg&gt;
  
      &lt;script&gt;    
        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);      
      &lt;/script&gt;
    &amp;lt;/body&amp;gt;
  &amp;lt;/html&amp;gt;
  
  &lt;/code&gt;&lt;/pre&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>Then the content of the scrollable code panel is cut off at the bottom (/html tag is missing).</p>
  
  <p>The result is this:
  <a href="https://i.stack.imgur.com/dEnWw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dEnWw.png" alt="enter image description here"></a></p>
  
  <p>I have two questions:
  1) How do I display the complete code block even after the header ?
  2) How can I display the code block without the scrollable panel (decreasing the font size)? </p>