Add code callouts attribute and replace code-callout shortcodes#7069
Merged
Add code callouts attribute and replace code-callout shortcodes#7069
Conversation
Support highlighting code in code blocks via fence attributes instead of the code-callout shortcode. Defaults to green when callout-color is omitted. Works alongside placeholders on the same code block. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Document the new callout and callout-color code fence attributes as the preferred approach. Move the shortcode syntax to a backward-compatibility note. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
Vale Style Check Results
Errors (blocking)
Warnings (54)
Showing first 20 of 54 warnings. ❌ Check failed — fix 3 error(s) before merging. |
github-actions
bot
added
product:explorer
sanderson
removed
product:v2-cloud
Contributor
|
github-actions
bot
added
product:explorer
github-actions
bot
added
product:v2-cloud
jstirnaman
pushed a commit
that referenced
this pull request
Apr 9, 2026
… branch Commit d80eb2f (#7069) refactored `layouts/_default/_markup/render-codeblock.html` to support the new `callout` fence attribute alongside the existing `placeholders` attribute. The refactor introduced a new conditional branch that handles placeholder/callout code blocks, but several of its interior action tags use bare `{{ ... }}` delimiters instead of the whitespace-trimming `{{- ... -}}` form used in the `else` branch: {{- if or .Attributes.placeholders .Attributes.callout -}} {{ $code := highlight .Inner .Type }} ... {{ $code | safeHTML }} Each non-trimmed action leaks two leading spaces and a trailing newline into the render-hook output. For a placeholder code block the final render-hook output then looks like: [2 spaces][newline] [4 spaces][newline] [4 spaces][newline] [2 spaces]<div class="highlight">...</div>[newline] Goldmark sees this as an indented code block preceded by blank lines, wraps the leading highlighted HTML in `<pre><code>`, and HTML-escapes every `<` and `>`. The visible symptom is a wall of escaped `<span class="line">...` fragments on every page with a placeholder or callout code block, including every InfluxDB 3 sample-data page, the enterprise backup-restore page, the clustered users/add page, and about 18 other admin pages. The regression landed on Apr 8 with #7069 and was reported as #7079. Fix: apply `{{- ... -}}` whitespace trimming to every action inside the placeholder/callout branch, matching the pattern the `else` branch already uses. No content files change. Verified with a local Hugo 0.149 build — every previously affected page now renders with zero escaped highlight blocks, and the site-wide count of pages containing `<div class="highlight` drops from 23 to 0. Closes #7079
This was referenced Apr 9, 2026
jstirnaman
added a commit
that referenced
this pull request
Apr 9, 2026
… branch (#7084) Commit d80eb2f (#7069) refactored `layouts/_default/_markup/render-codeblock.html` to support the new `callout` fence attribute alongside the existing `placeholders` attribute. The refactor introduced a new conditional branch that handles placeholder/callout code blocks, but several of its interior action tags use bare `{{ ... }}` delimiters instead of the whitespace-trimming `{{- ... -}}` form used in the `else` branch: {{- if or .Attributes.placeholders .Attributes.callout -}} {{ $code := highlight .Inner .Type }} ... {{ $code | safeHTML }} Each non-trimmed action leaks two leading spaces and a trailing newline into the render-hook output. For a placeholder code block the final render-hook output then looks like: [2 spaces][newline] [4 spaces][newline] [4 spaces][newline] [2 spaces]<div class="highlight">...</div>[newline] Goldmark sees this as an indented code block preceded by blank lines, wraps the leading highlighted HTML in `<pre><code>`, and HTML-escapes every `<` and `>`. The visible symptom is a wall of escaped `<span class="line">...` fragments on every page with a placeholder or callout code block, including every InfluxDB 3 sample-data page, the enterprise backup-restore page, the clustered users/add page, and about 18 other admin pages. The regression landed on Apr 8 with #7069 and was reported as #7079. Fix: apply `{{- ... -}}` whitespace trimming to every action inside the placeholder/callout branch, matching the pattern the `else` branch already uses. No content files change. Verified with a local Hugo 0.149 build — every previously affected page now renders with zero escaped highlight blocks, and the site-wide count of pages containing `<div class="highlight` drops from 23 to 0. Closes #7079 Co-authored-by: Claude <noreply@anthropic.com>
This was referenced Apr 9, 2026
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.
Summary
calloutandcallout-colorattributes on codeblocks to replacecode-calloutshortcodes. The attribute approach is much less brittle than the shortcode approach.code-calloutshortcode usage.code-calloutshortcodecalloutattributeinluxdb/hostshortcode that was adding a newline when rendering the output.Checklist
npx hugo --quiet)