https://github.com/dixslyf/quarto-group-html-cell-outputs
A Quarto filter extension to group cell outputs by wrapping them with a parent container when rendering to HTML.
https://github.com/dixslyf/quarto-group-html-cell-outputs
html lua nix pandoc pandoc-filter quarto quarto-extension quarto-filter
Last synced: 8 months ago
JSON representation
A Quarto filter extension to group cell outputs by wrapping them with a parent container when rendering to HTML.
- Host: GitHub
- URL: https://github.com/dixslyf/quarto-group-html-cell-outputs
- Owner: dixslyf
- License: mit
- Created: 2025-07-20T13:03:15.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-20T17:25:31.000Z (9 months ago)
- Last Synced: 2025-07-20T18:22:08.038Z (9 months ago)
- Topics: html, lua, nix, pandoc, pandoc-filter, quarto, quarto-extension, quarto-filter
- Language: Lua
- Homepage: https://dixslyf.github.io/quarto-group-html-cell-outputs/
- Size: 458 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `group-html-cell-outputs` Quarto Extension
The `group-html-cell-outputs` [Quarto](https://quarto.org/) 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 `div`s 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` `div`s.
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.
1. Since outputs are fragmented across different sibling `div`s,
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 `div`s,
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:
```sh
quarto add dixslyf/quarto-group-html-cell-outputs
```
See Quarto's documentation on [Managing Extensions](https://quarto.org/docs/extensions/managing.html)
for more information.
## Usage
In your `_quarto.yml` file or document's YAML header, add `group-html-cell-outputs` to `filters`:
```yaml
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](https://dixslyf.github.io/quarto-group-html-cell-outputs/).