fix(syntax-highlighting): extend diff highlight to overflowing line content#7178
Merged
jstirnaman merged 13 commits intomasterfrom May 1, 2026
Merged
fix(syntax-highlighting): extend diff highlight to overflowing line content#7178jstirnaman merged 13 commits intomasterfrom
jstirnaman merged 13 commits intomasterfrom
Conversation
…eams
Validator change:
scripts/lib/codeblock-validators/yaml.mjs — switch yaml.load to
yaml.loadAll so YAML streams (multiple documents separated by ---)
parse cleanly. Kubernetes manifests, InfluxDB template manifests,
and similar tools commonly emit multi-doc streams; rejecting them
forced authors to relabel the fence and lose syntax highlighting.
Content fixes (yaml fence preserved):
content/influxdb3/clustered/reference/release-notes/clustered.md
- Line 148 fence relabeled yaml → diff (the block is a literal
diff with + prefixes, not yaml).
- Line 823 (now 823): replaced bare `...` ellipsis with
`# ... fields elided ...` comment so indentation stays valid.
- Line 1747 (now ~1747): replaced bare `....` and inner `...`
ellipses with structured `# ... fields elided ...` comments.
content/influxdb3/enterprise/admin/clustering.md
- Three node-config blocks (Small / Medium / Large cluster) had
`mode:` defined per node, producing "duplicated mapping key"
errors because each block was one YAML document. Added `---`
between node configs so each becomes its own document in the
stream — matches author intent (per-node configs side by side)
and parses cleanly.
content/kapacitor/v1/reference/event_handlers/alerta.md
- Genuine YAML bug: `correlate: 'event1', 'event2'` is invalid
syntax, and the very next `correlate:` line was a duplicate
key. Fixed to `correlate: ['event1', 'event2']` and removed
the duplicate line that incorrectly assigned service names to
the correlate key.
Test coverage: 59/59 lint-codeblocks tests still pass; multi-doc
support is exercised implicitly by the now-passing real content.
… comments Per review feedback on #7160, the legacy admin-section example block contained `- ...` and bare `...` lines used as ellipsis. While the current YAML parser accepts them (they parse as the string '...'), they are misleading: a copy-paste of the example would be invalid as actual config. Replaced with explicit YAML comments that name what was elided. Also normalized the leading comment from `## ...snip` to a properly descriptive YAML comment for consistency.
…ontent The .gi (and .gd) classes used `display: block`, which sizes the highlighted span to the parent's visible width. When a diff line horizontally overflows the code-block container, the text continues to the right of the visible area but the green/red background does not — the right-hand portion of the line renders without any highlight, which is what the user reported on a clustered release-notes diff fence. Switch to `display: inline-block` + `min-width: 100%`. inline-block lets the element grow with content (so it covers the full overflow width); min-width: 100% keeps the highlight at least as wide as the visible container for short lines. The combined behavior is the standard pattern for line-level diff highlights in pre/code blocks.
Contributor
|
Contributor
Author
|
Bug: Diff highlighting doesn't show at all. |
2 tasks
… with palette The previous `display: inline-block` on `.gi`/`.gd` swallowed the trailing newline inside each chroma diff-line span, collapsing every diff line onto a single inline row. Switch to `display: block` + `width: max-content` + `min-width: 100%`: block restores per-line stacking, max-content lets the highlight grow with content past the visible area, and min-width keeps short lines tinted to the right edge. Replace the hard-coded green/red with palette variables ($gr-rainforest/$gr-viridian, $r-curacao/$r-ruby) and lower the tint opacity for better readability against the article background.
Contributor
Vale Style Check Results
✅ Check passed |
Contributor
Author
|
Adding the test-diff examples to 
|
Add four diff fence fixtures to content/example.md (subtractive only, subtractive with overflow, subtractive with context, mixed additions and deletions) and matching Cypress assertions in render-regression.cy.js. Tests guard against the regression fixed in the prior commit: - per-row stacking (sibling .gd spans must have distinct top offsets) - display: block on .gd/.gi - width: max-content (.gd offsetWidth exceeds parent clientWidth on overflowing lines) - context lines remain untinted Also extend assertHasHighlightedCodeBlock's selector to include language-diff so the existing /example/ smoke test covers the new fixtures.
- Apply Prettier formatting to multi-line .toArray() chain in render-regression.cy.js (was unstaged)
Contributor
Author
|
Quick self-review (low effort): Findings: 0 P1, 0 P2, 2 P3, 2 P4
Verification: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Reported on a diff fence in influxdb3/clustered/reference/release-notes/clustered/ — long
+lines that horizontally overflow the visible code-block width render with the green diff highlight covering only the leftmost portion of the line (up to the right edge of the visible container). The overflowed text on the right has no highlight.The
.giand.gdclasses (Generic.Inserted / Generic.Deleted, applied to lines in```difffences) were styled withdisplay: block. A block-level element sizes itself to its parent's content area — which is the visible width of the<pre>container, not the natural width of the line content. Lines longer than that visible width extend to the right but the background does not follow.Fix
Switch from
display: blocktodisplay: inline-block+min-width: 100%:uses
display: block+width: max-contentinline-blockwas abandoned because chroma puts a trailing \n inside the .gi span and inline-block collapsed lines onto one row.Affects:
.gi(Generic.Inserted, the+lines).gd(Generic.Deleted, the-lines)Verification
npx hugo --quietbuilds cleanTest plan
+lines should be fully highlighted