12.3 Scrollable text output

In Section 7.4, we showed how to restrict the heights of code blocks and text output blocks via CSS. In fact, there is a simpler method with the chunk options attr.source and attr.output to add the style attribute to the fenced code blocks in the Markdown output (see Section 11.13 for more information on these options). For example, for this code chunk with the attr.output option:

  1. ```{r, attr.output='style="max-height: 100px;"'}
  2. 1:300
  3. ```

Its Markdown output will be:

  1. ```r
  2. 1:300
  3. ```
  5. ```{style="max-height: 100px;"}
  6. ##   [1]   1   2   3   4   5   6   7   8   9  10
  7. ##  [11]  11  12  13  14  15  16  17  18  19  20
  8. ##  ... ...
  9. ```

Then the text output block will be converted to HTML by Pandoc:

  1. <pre style="max-height: 100px;">
  2. <code>##   [1]   1   2   3   4   5   6   7   8   9  10
  3. ##  [11]  11  12  13  14  15  16  17  18  19  20
  4. ##  ... ...</code>
  5. </pre>

To learn more about Pandoc’s fenced code blocks, please read its manual at https://pandoc.org/MANUAL.html#fenced-code-blocks.

The attr.source and attr.output options have made it possible for us to specify maximum heights for individual code chunks. However, the syntax is a little clunky, and requires a better understanding of CSS and Pandoc’s Markdown syntax. Below we show an example of a custom output hook that works with a custom chunk option max.height, so you will only need to set the chunk option like max.height = "100px" instead of attr.output = 'style="max-height: 100px;"'. In this example, we only manipulate the options argument, but not the x argument.

  1. ---
  2. title: Scrollable code blocks
  3. output: 
  4.   html_document: 
  5.     highlight: tango
  6. ---
  8. We set up an `output` hook to add a `style` attribute to the
  9. text output when the chunk option `max.height` is set.
  11. ```{r, include=FALSE}
  12. options(width = 60)
  13. local({
  14.   hook_output <- knitr::knit_hooks$get('output')
  15.   knitr::knit_hooks$set(output = function(x, options) {
  16.     if (!is.null(options$max.height)) options$attr.output <- c(
  17.       options$attr.output,
  18.       sprintf('style="max-height: %s;"', options$max.height)
  19.     )
  20.     hook_output(x, options)
  21.   })
  22. })
  23. ```
  25. Without the `max.height` option, you will see the full output,
  26. e.g.,
  28. ```{r}
  29. 1:100
  30. ```
  32. Now we set `max.height` to `100px`. You will see a scrollbar
  33. in the text output because its height is larger than 100px.
  35. ```{r, max.height='100px'}
  36. 1:100
  37. ```
  39. Essentially the `max.height` option is converted to the
  40. `attr.output` option. It works even if the `attr.output`
  41. option is present, i.e., it will not override the
  42. `attr.output` option, e.g., we show line numbers on the left
  43. side of the text output via the `.numberLines` attribute:
  45. ```{r, max.height='100px', attr.output='.numberLines'}
  46. 1:100
  47. ```

Figure 12.1 shows the output. Note that in the last code chunk with the chunk option attr.output, the option will not be overridden by max.height because we respect existing attributes by combining them with the style attribute generated by max.height:

  1. options$attr.output <- c(
  2.   options$attr.output,
  3.   sprintf('style="max-height: %s;"', options$max.height)
  4. )

An example of scrollable text output, with its height specified in the chunk option max.height.

FIGURE 12.1: An example of scrollable text output, with its height specified in the chunk option max.height.

You can use a similar trick in the source hook to limit the height of source code blocks.