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

1

18

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?

Natka answered 21/4, 2014 at 19:47 Comment(1)
I don't see why this question has been closed. Reveal.js is 'programming' a slideshow with HTML / CSS / JS.Delude
E
12

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.

Evenings answered 22/4, 2014 at 9:9 Comment(6)
In case anyone ends up here: The specific CSS is max-height set on .reveal pre code. Just overwrite this value with your own CSS rules and either set it to a larger value or to initial.Burrow
is this still a valid answer?Kauslick
Now there's a stretch class that you can put on code blocksYount
github.com/hakimel/reveal.js/blob/…Delude
Just to summarise, there are two options: 1. overwrite the CSS value of max-height for .reveal pre code. The default value is in the theme .css, which is 400px. 2. add a stretch class to pre. adding stretch class to code will make the code overflows and is not scrollable.Shipowner
Height works fine but how can we change the width of this code block?Flitter

© 2022 - 2024 — McMap. All rights reserved.