Skip to content

fix: prevent code blocks from overflowing post layout#11

Merged
Heersin merged 1 commit into
mainfrom
codex/troubleshoot-code-block-overflow-issue
Mar 2, 2026
Merged

fix: prevent code blocks from overflowing post layout#11
Heersin merged 1 commit into
mainfrom
codex/troubleshoot-code-block-overflow-issue

Conversation

@Heersin
Copy link
Copy Markdown
Owner

@Heersin Heersin commented Mar 2, 2026

Motivation

  • Long fenced code blocks in article content could stretch the post layout because the theme did not constrain pre/code elements, so add styles to keep code inside the article container and enable scrolling.

Description

  • Add .prose pre rules to set max-width: 100%, overflow-x: auto, padding, border and a dark background to make long code lines scrollable inside the post.
  • Add .prose code font-family and font-size for consistent monospace rendering inside prose.
  • Add .prose pre code { white-space: pre; } to ensure fenced code preserves original whitespace and line breaks.

Testing

  • Confirmed the stylesheet assets/css/main.css was updated and the diff contains the new .prose pre/.prose code rules.
  • Attempted to run hugo server -s exampleSite -t bitblog-theme, which failed because hugo is not installed in this environment.
  • Attempted a Playwright screenshot of the local site, which failed because the dev server was not reachable, so no rendered screenshot was produced.

Codex Task

@Heersin Heersin merged commit cc20bd0 into main Mar 2, 2026
0 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant