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

时间:2016-06-17 15:29:01

标签: javascript css reveal.js highlight.js

我正准备使用reveal.js进行演示,我想在其中展示一些代码。

如果我只有一张包含代码的幻灯片,它会显示在一个面板中,其中包含一个包含完整代码的滚动条: enter image description here

但是,如果我在代码块前面加上标题:

<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标记)。

结果如下: enter image description here

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

1 个答案:

答案 0 :(得分:0)

  

1)即使在标题之后,如何显示完整的代码块?

我的猜测是该代码块的`{edit[user.id] ? (` 导致其离开页面。我将markdown与show一起使用,所以我没有与您完全相同的设置。但是,使用Google Chrome浏览器中的Inspect功能,我可以看到代码块的高度来自显示主题的CSS(在我的情况下是max-height):

beige.css

我不确定您使用的主题是什么,但是如果您可以覆盖.reveal pre code { display: block; padding: 5px; overflow: auto; max-height: 400px; word-wrap: normal; } 值并使其更小(按H1的高度),它应该可以使可滚动区域适合。

  

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

就我而言,它又与max-height有关,即beige.css

font-size

我在Chrome的Inspect视图中减小了该值,直到所有文本都适合我的代码块为止。然后,您只需要获取该数字并找出如何覆盖它即可。

将您的两个问题放在一起,以下假设.reveal pre { [...] font-size: 0.55em; [...] } max-height:300px是正确的值(但它们将取决于您的主题):

font-size:0.35em