posit-dev / posit-dev/open-source-website

Support `.code-overflow-wrap` class on code blocks

Open
#228 0 comments 0 reactions 1 assignee View on GitHub

@cwickham is already working on this.

Since May 14, 2026.

blog
Dominant language
HTML
Stars
55
Forks
24
Avg merge
1d 21h
Merged PRs (30d)
17

Description

Problem

By default, code cells in blog posts get a horizontal-scroll treatment when their content exceeds the column width. For short single-line entries (e.g. a one-line shell command, a YAML key) this produces an awkward narrow scrollable strip when the content would actually fit if simply wrapped.

Quarto's HTML format supports the code-overflow-wrap option (and a corresponding .code-overflow-wrap class) that flips a code block to white-space: pre-wrap so it wraps instead of scrolling. We don't currently honour that class on this site.

Proposal

Add a CSS rule so that any code block (or its container) carrying the code-overflow-wrap class wraps:

.code-overflow-wrap pre,
pre.code-overflow-wrap,
pre code.code-overflow-wrap {
  white-space: pre-wrap;
  word-break: break-word;
}

That lets authors opt in per block via Quarto's existing syntax ({.code-overflow-wrap} on a fence, or code-overflow: wrap in the cell options) without changing the default behaviour for code that's genuinely meant to scroll (e.g. wide shell output).

Posts that would benefit

These ported Quarto posts have at least one code cell where wrap would read better than scroll:

  • content/blog/quarto/2024-01-24-1.4-release/
  • content/blog/quarto/2024-12-12-includes-meta/
  • content/blog/quarto/2025-10-20-quarto-wizard-1-0-0/

Surfaced during the Quarto-blog port review.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.