Question
I often have code samples in reveal.js slide decks that span quite many lines.
Take for instance the markdown code as example:
https://stackoverflow.com/questions/23204784
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian---
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')
```
Once rendered, it will look like this, with a scroll bar:
The code block seems to always have a max height, and past a certain number of lines a scrollbar appears, even though I'd prefer just a larger box.
I have not yet figured out how to make the box larger both vertically and horizontally so to fill the available slide area rather than scrolling: I have no interest in pausing my presentation to scroll with the mouse just to show more code!
Does anybody have suggestions?
Solution
The css provided by Reveal.js seems responsible for the vertical limit. Hence it seems you have no choice, but to tweak the css yourself.
For example, modify the file css/reveal.css (and regenerate css/reveal.min.css).
Or you could try to override this value with an additional theme you would provide. For example, copy css/theme/default.css to css/theme/mine.css, define the style you want for the code blocks, and link to this file in the <head> of your .html presentation file.
