【问题标题】:How to show large code samples in reveal.js? [closed]如何在reveal.js中显示大型代码示例? [关闭]
【发布时间】:2014-04-21 19:47:55
【问题描述】:

我经常在 Reveal.js 幻灯片中有代码示例,跨越相当多的行。

以markdown代码为例:

---
title: "Long and silly code"
author: "Yours truly"
---

```python
print('1')
print('2')
print('fizz')
print('4')
print('buzz')
print('fizz')
print('7')
print('8')
print('fizz')
print('buzz')
print('11')
print('fizz')
print('13')
print('14')
print('fizzbuzz')
print('16')
print('17')
```

渲染后,它看起来像这样,带有一个滚动条:

代码块似乎总是有一个最大高度,并且超过一定数量的行会出现一个滚动条,即使我更喜欢一个更大的框。

我还没有弄清楚如何使框在垂直和水平方向都变大,以便填充可用的幻灯片区域而不是滚动:我没有兴趣暂停演示文稿以使用鼠标滚动来显示更多代码!

有人有建议吗?

【问题讨论】:

  • 我不明白为什么这个问题已经关闭。 Reveal.js 正在使用 HTML / CSS / JS “编程”幻灯片。

标签: markdown reveal.js


【解决方案1】:

Reveal.js 提供的 css 似乎是 responsible for the vertical limit。 因此,您似乎别无选择,只能自己调整 CSS。

例如修改文件css/reveal.css(并重新生成css/reveal.min.css)。

或者您可以尝试使用您提供的其他主题来覆盖此值。例如,将css/theme/default.css 复制到css/theme/mine.css,定义您想要的代码块样式,并在.html 演示文件的<head> 中链接到此文件。

【讨论】:

  • 万一有人在这里结束:具体的 CSS 是 max-height 设置在 .reveal pre code 上。只需使用您自己的 CSS 规则覆盖此值,然后将其设置为更大的值或 initial
  • 这仍然是一个有效的答案吗?
  • 现在有一个stretch 类可以放在代码块上
  • 总结一下,有两种选择: 1. 将max-height 的CSS 值覆盖为.reveal pre code。默认值在主题.css 中,即400px。 2. 将stretch 类添加到pre。将stretch 类添加到code 会导致代码溢出且不可滚动。
猜你喜欢
  • 2010-11-21
  • 1970-01-01
  • 1970-01-01
  • 2011-01-23
  • 1970-01-01
  • 1970-01-01
  • 2011-03-07
  • 1970-01-01
相关资源
最近更新 更多