Size of the code chunk output in revealjs

[Charango-Chile]

Hi,

I have some output coming from a code chunk, unfortunately it seems to be cut at line 20 or so...

I understand the rationale for not allowing overflowing code echoes to be placed in slides, however, depending on the height and widht of the presentation it may be an artificial imposition.

I'm creating a revealjs presentation with quarto where I'm setting width oif 1920 and height if 1080. Placing the following code:

#| echo: true
#| code-overflow: wrap
#| tidy: true

data("mtcars")
head(mtcars, 25)

in one of the slides produces code output with a scrolling bar, but I till have plenty of vertical space... I have tried the following

.reveal pre code {
    display: block;
    padding: 5px;
    font-size: 1.1em;
    font-family: Consolas;
    overflow: auto;
    max-height: 800px;
    word-wrap: normal;
}

in my cusotmised .scss file.

Any help would be appreciated, I have been all over the existing Quarto documentation not finding an answer to this and then the reveal.js website is a little bit obscure for my level of understanding of things.

Cheers, Jose

[jjallaire]

@cderv Do you know if this is something that is straightforward to resolve with CSS?

[Charango-Chile]

Hi,

Apparently, there is a way to force a different size for the code chunk... If you use max-height: 100% !important; in your scss file for the .reveal pre code element then you get code output which is not cut short by the current definition (around 20 lines)... Unfortunately, if your code output exceeds the available vertical space then the whole thing will go out of the limits of the slide.

The kind of behaviour that would be nice to have is that you can use up to 100% of the vertical space before the code output becomes scrollable if you go over the alloted vertical space. Definitely the vertical space thing seems to be something a little weird in reveal.js, I just made some experiments trying to export a PDF version of my slide deck using decktape and vertical placement of some elements is funny to say the least... So probably this whole behaviour relates to that and is essential to the way revealjs structure the vertical space in slides.

Many thanks in advance in case you get any extra information on this one...

Cheers, Jose

[jjallaire]

You can make the entire side scrollable with this: https://quarto.org/docs/presentations/revealjs/#content-overflow

[cderv]

The code chunk output becomes scrollable as default reveal theme set a max-height as you found:
https://github.com/quarto-dev/quarto-cli/blob/e8dd7e1448cbce1c52c04274222a8e731780bc6c/src/resources/formats/revealjs/reveal/css/theme/template/theme.scss#L191-L197

.reveal pre code {
	display: block;
	padding: 5px;
	overflow: auto;
	max-height: 400px;
	word-wrap: normal;
}

This comes directly from Reveal JS template theme: https://github.com/hakimel/reveal.js/blob/9415ad5d7f329ccd8fbc82627789396a57fdbb3d/css/theme/template/theme.scss#L191-L197

Setting max-height: none or max-height: 100% will be related to the containing block height so this will not solve the problem if the containing blog does not limit either to slide height. In Quarto we offer the scrollable option as mentioned above to handle overflow on slide content so we do not set a max-height ourself. This could be an option for you to make the all slide scrollable.

For reference, here are the value possible for max-height: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
Some are still experimental but could be helpful when browsers will support them.

Regarding RevealJS specificity, it defines --slide-width and --slide-height CSS variable so that the value set in configuration can be accessed in CSS (not in docs but here is the change: hakimel/reveal.js@942304d

This mean you can use the value to set max-height to the the slide height (1080 in your case).

format:
  revealjs:
    width: 1920
    height: 1080
    theme: [default, custom.scss]

with custom.css

/*-- scss:rules --*/

.reveal pre code {
  max-height: var(--slide-height) ;
}

But this not perfect as the slide height contains the height of the title and any other content. So it would work well if your code chunk output is the only content on the slide. The ideal thing would be to adjust to the remaining space and be scrollable otherwise means computing dynamic dimension.

With Quarto we define some variables like $presentation-heading-line-height which will map to reveal $headingLineHeight so this could be used to at least remove the Header height but dealing with the units is not easy. Probably something like this would work considering a header two is on the slide

/*-- scss:rules --*/

.reveal pre code {
  max-height: calc(var(--slide-height) - #{$presentation-heading-line-height * $presentation-h2-font-size})
}

But all this is approximative - I don't think there is an easy way using CSS only to do that. I don't know if some flex layout for the code cell source and output could help, but it is not really straightforward.

Maybe using some JS to dynamic compute the best dimension could work - it would not be straightforward either to generalize to all content. I have put an example for a simple slide in this gist to check how this could work by getting all element on the slide except the code output and set max-height based on size of other elements: https://gist.github.com/cderv/1babac45835a83fb7238d59cc666ac71

Hope this helps!

[arthur-shaw]

This thread has been extremely useful.

To help others who find this thread, here's what is working for me (running Quarto 1.4.511). To increase the maximum size for code blocks, I had to add the .slides selector to the CSS rule discussed above:

.reveal .slides pre code {
    max-height: 800px;
}