我正在准备使用 reveal.js 的演示文稿,我想在其中展示一些代码行。
如果我只有一张带有代码的幻灯片,它会显示在一个带有包含完整代码的滚动条的面板中:
但是,如果我在代码块前面加上标题:
<section id="slide-12">
<h3>Example 1: my first d3 visualization</h3>
<pre><code>
<!DOCTYPE html>
<meta charset="utf-8"> <!-- also save this file as unicode-8 ! -->
<head>
<script src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<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>
</body>
</html>
</code></pre>
</section>
然后可滚动代码面板的内容在底部被 chop (/html 标签丢失)。
我有两个问题: 1)如何在标题之后显示完整的代码块? 2)如何在没有可滚动面板(减小字体大小)的情况下显示代码块?
最佳答案
1) How do I display the complete code block even after the header?
我的猜测是该代码块的 max-height
导致它离开页面。我将 markdown 与 reveal 一起使用,因此我的设置与您不完全相同。但是,使用 Google Chrome 中的检查功能,我能够看到我的代码块的高度来自显示主题的 CSS(在我的例子中是 beige.css
):
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
我不确定您使用的是什么主题,但如果您可以覆盖 max-height
值并使其变小(按 H1 的高度),它应该可以使可滚动区域适合。
2) How can I display the code block without the scrollable panel (decreasing the font size)?
在我的例子中,它又与 beige.css
相关,即 font-size
:
.reveal pre {
[...]
font-size: 0.55em;
[...]
}
我在 Chrome 的检查 View 中减小了这个值,直到所有文本都适合我的代码块。然后您只需要获取该数字并弄清楚如何覆盖它。
将您的两个问题放在一起,以下假定 max-height:300px
和 font-size:0.35em
是正确的值(但它们将取决于您的主题):
<pre><code style="max-height:300px;font-size:0.35em">
...
</code></pre>
关于javascript - 带有代码的演示文稿在底部被 chop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37885284/