Skip to content

dixslyf/quarto-group-html-cell-outputs

Repository files navigation

group-html-cell-outputs Quarto Extension

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.

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.

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.

For additional configuration, please refer to the documentation.

About

A Quarto filter extension to group cell outputs by wrapping them with a parent container when rendering to HTML.

Topics

Resources

License

Stars

Watchers

Forks