The poem was fenced to keep its line breaks, but StyledContent styles every pre as code (monospace, striped background, border, 2em padding), so verse came out looking like source code.
This keeps the fence for authoring and makes it render as verse:
tags the poem block as poem instead of a bare fence, which remark turns into <code class="language-poem">;
adds two scoped rules to StyledContent in src/templates/post/index.tsx: pre:has(> code.language-poem) drops the code chrome (background, border, padding) and sets a verse line-height, and pre > code.language-poem sets the serif face (Georgia, already used for image captions on the site) with white-space: pre-wrap so long lines wrap on narrow screens instead of scrolling sideways.
Only blocks tagged poem are affected - ordinary code blocks keep their current styling.
Formatting conventions this settles, so the poem no longer needs invisible trailing whitespace:
one blank line between the two quatrains of a stanza;
two blank lines between stanzas;
no trailing double-spaces (they are literal inside a fence and do nothing).
Alternatives considered, if you would rather not carry a CSS rule: a trailing backslash or two trailing spaces at the end of each line is a CommonMark hard break and renders as <br> with no fence at all - both verified against this repo's remark setup. The trade-off is that the breaks live in the markup of every line rather than in one fence.
Verified: clean rebuild, typecheck, lint (only the 8 pre-existing warn files - src/templates/post/index.tsx is clean), both rules present in the compiled CSS, and the poem renders as 32 lines with 4 single-blank quatrain breaks and 3 double-blank stanza breaks.
The poem was fenced to keep its line breaks, but `StyledContent` styles every `pre` as code (monospace, striped background, border, 2em padding), so verse came out looking like source code.
This keeps the fence for authoring and makes it render as verse:
- tags the poem block as `poem` instead of a bare fence, which remark turns into `<code class="language-poem">`;
- adds two scoped rules to `StyledContent` in `src/templates/post/index.tsx`: `pre:has(> code.language-poem)` drops the code chrome (background, border, padding) and sets a verse line-height, and `pre > code.language-poem` sets the serif face (`Georgia`, already used for image captions on the site) with `white-space: pre-wrap` so long lines wrap on narrow screens instead of scrolling sideways.
Only blocks tagged `poem` are affected - ordinary code blocks keep their current styling.
Formatting conventions this settles, so the poem no longer needs invisible trailing whitespace:
- one blank line between the two quatrains of a stanza;
- two blank lines between stanzas;
- no trailing double-spaces (they are literal inside a fence and do nothing).
Alternatives considered, if you would rather not carry a CSS rule: a trailing backslash or two trailing spaces at the end of each line is a CommonMark hard break and renders as `<br>` with no fence at all - both verified against this repo's remark setup. The trade-off is that the breaks live in the markup of every line rather than in one fence.
Verified: clean rebuild, typecheck, lint (only the 8 pre-existing warn files - `src/templates/post/index.tsx` is clean), both rules present in the compiled CSS, and the poem renders as 32 lines with 4 single-blank quatrain breaks and 3 double-blank stanza breaks.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
The poem was fenced to keep its line breaks, but
StyledContentstyles everypreas code (monospace, striped background, border, 2em padding), so verse came out looking like source code.This keeps the fence for authoring and makes it render as verse:
poeminstead of a bare fence, which remark turns into<code class="language-poem">;StyledContentinsrc/templates/post/index.tsx:pre:has(> code.language-poem)drops the code chrome (background, border, padding) and sets a verse line-height, andpre > code.language-poemsets the serif face (Georgia, already used for image captions on the site) withwhite-space: pre-wrapso long lines wrap on narrow screens instead of scrolling sideways.Only blocks tagged
poemare affected - ordinary code blocks keep their current styling.Formatting conventions this settles, so the poem no longer needs invisible trailing whitespace:
Alternatives considered, if you would rather not carry a CSS rule: a trailing backslash or two trailing spaces at the end of each line is a CommonMark hard break and renders as
<br>with no fence at all - both verified against this repo's remark setup. The trade-off is that the breaks live in the markup of every line rather than in one fence.Verified: clean rebuild, typecheck, lint (only the 8 pre-existing warn files -
src/templates/post/index.tsxis clean), both rules present in the compiled CSS, and the poem renders as 32 lines with 4 single-blank quatrain breaks and 3 double-blank stanza breaks.