Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show large code samples in reveal.js? [closed]

I often have code samples in reveal.js slide decks that span quite many lines.

Take for instance the markdown code as example:

---
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:

enter image description here

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?

like image 973
Crell Avatar asked Apr 21 '14 19:04

Crell


1 Answers

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.

like image 61
gturri Avatar answered Oct 22 '22 00:10

gturri