Getting Started

Installation

To install the group-html-cell-outputs extension for a project, run the following in your shell:

quarto add dixslyf/quarto-group-html-cell-outputs

See Quarto’s documentation on Managing Extensions for more information.

Basic Usage

In your _quarto.yml file or document’s YAML header, add group-html-cell-outputs to filters:

filters:
  - group-html-cell-outputs

When this filter is used with the default configuration, all outputs of a cell are automatically wrapped in a shared parent div with the cell-output-container class. Some default styles are applied to cell-output-container to adjust padding and prevent each child output element from having its own scrollbar so that the output container looks like a single output block.

Here is an example with long outputs:

import sys

for i in range(0, 3):
    print(f"Output stdout {i} " * 10)

for i in range(0, 3):
    print(f"Output stderr {i} " * 10, file=sys.stderr)

Output stdout 0 Output stdout 0 Output stdout 0 Output stdout 0 Output stdout 0 Output stdout 0 Output stdout 0 Output stdout 0 Output stdout 0 Output stdout 0 
Output stdout 1 Output stdout 1 Output stdout 1 Output stdout 1 Output stdout 1 Output stdout 1 Output stdout 1 Output stdout 1 Output stdout 1 Output stdout 1 
Output stdout 2 Output stdout 2 Output stdout 2 Output stdout 2 Output stdout 2 Output stdout 2 Output stdout 2 Output stdout 2 Output stdout 2 Output stdout 2 

Output stderr 0 Output stderr 0 Output stderr 0 Output stderr 0 Output stderr 0 Output stderr 0 Output stderr 0 Output stderr 0 Output stderr 0 Output stderr 0 
Output stderr 1 Output stderr 1 Output stderr 1 Output stderr 1 Output stderr 1 Output stderr 1 Output stderr 1 Output stderr 1 Output stderr 1 Output stderr 1 
Output stderr 2 Output stderr 2 Output stderr 2 Output stderr 2 Output stderr 2 Output stderr 2 Output stderr 2 Output stderr 2 Output stderr 2 Output stderr 2 

Without the filter, the standard and error outputs would have had their own scrollbars. Now, they share a single scrollbar.

Additional styles can be applied by targeting .cell-output-container with CSS, or by overriding the classes applied to the container div (see default-container-classes and output-container-classes).