group-html-cell-outputs (Quarto Extension)

About

The group-html-cell-outputs Quarto extension adds a filter to group the outputs of a cell by wrapping them with a parent div when rendering to HTML.

Motivation

When Quarto renders a code cell to HTML, it creates separate div elements for the code block, standard output (stdout) and error output (stderr). These output divs are rendered as direct siblings of the code block div. For certain input formats (notably, Jupyter notebooks), there can be multiple, interleaved stdout and stderr divs.

The rendering behaviour described above presents two main issues:

1. Each output div has its own independent styling. Hence, for long outputs, there may be multiple, separate scrollbars for individual output blocks. This looks awkward and makes the cell output hard to read.

2. Since outputs are fragmented across different sibling divs, it is difficult to treat them as a single unit. For example, you cannot easily scroll or collapse all cell outputs together. Furthermore, when you have an extremely long list of such divs, it becomes difficult to limit their max height and show a scrollbar without accidentally hiding part of the code block.

This filter resolves these issues by wrapping the outputs of a cell with a parent div element. By default, the parent div is given the cell-output-container class.