fix(code-block): normalize indentation of template literal snippets#217
fix(code-block): normalize indentation of template literal snippets#217x0rgus wants to merge 6 commits intomintlify:mainfrom
Conversation
Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| /> | ||
| > | ||
| {codeString} | ||
| </BaseCodeBlock> |
There was a problem hiding this comment.
Overriding BaseCodeBlock children breaks pre-highlighted Shiki rendering
Medium Severity
Passing {codeString} as explicit JSX children to BaseCodeBlock overrides the original children ReactNode from {...params}. Inside BaseCodeBlock, findShikiClassName(children) can no longer detect pre-highlighted Shiki React elements (since children is now always a plain string), and getShikiBackgroundColors can no longer extract background colors from React element style props. When the original children was a pre-highlighted React element tree, the fallback render path now displays plain text instead of the styled elements.


Problem
When passing code to
<CodeBlock>using JSX template literals, indentation from the surrounding JSX formatting is preserved.Example:
Because the snippet is indented inside JSX, the rendered output contains extra leading spaces on each line. This leads to inconsistent indentation and formatting issues in rendered code blocks.
This behavior was reported in the discussion:
https://github.com/orgs/mintlify/discussions/2374
Solution
This PR introduces a small
dedentutility that:The normalization happens before the code is passed to
BaseCodeBlock.Additionally, indentation detection now considers spaces only to avoid edge cases with mixed tab/space indentation.
Result
Code snippets written with indentation inside JSX template literals render correctly while preserving relative indentation.
Example:
Now renders as:
Testing
Tested via Storybook examples with:
Happy to adjust the approach if there's a preferred utility or existing helper for this.
Note
Low Risk
Low risk: small, localized string normalization in
CodeBlockthat could slightly change whitespace/line breaks for consumers relying on exact indentation.Overview
CodeBlocknow dedents string children (removing leading/trailing blank lines and the minimum shared space indentation) before passing code toBaseCodeBlockandCopyToClipboardButton, fixing extra indentation when snippets are provided via JSX template literals.Adds a new
dedentutility and Storybook stories covering template-literal snippets (bash/yaml/js) and empty-line handling.Written by Cursor Bugbot for commit 3e2deb9. This will update automatically on new commits. Configure here.