Skip to content

fix(code-block): normalize indentation of template literal snippets#217

Open
x0rgus wants to merge 6 commits intomintlify:mainfrom
x0rgus:fix/codeblock-indent
Open

fix(code-block): normalize indentation of template literal snippets#217
x0rgus wants to merge 6 commits intomintlify:mainfrom
x0rgus:fix/codeblock-indent

Conversation

@x0rgus
Copy link
Contributor

@x0rgus x0rgus commented Mar 13, 2026

Problem

When passing code to <CodeBlock> using JSX template literals, indentation from the surrounding JSX formatting is preserved.

Example:

<CodeBlock language="bash">
{`
  CLICKHOUSE_USERNAME=main
  CLICKHOUSE_FRAGMENT=
  CLICKHOUSE_IP=123.456.78.90
`}
</CodeBlock>

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 dedent utility that:

  • removes leading and trailing empty lines
  • detects the minimum shared indentation across non-empty lines
  • strips that indentation from all lines before rendering

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:

<CodeBlock language="yaml">
{`
  applications:
    myapp:
      source:
        root: "/"
`}
</CodeBlock>

Now renders as:

applications:
  myapp:
    source:
      root: "/"

Testing

Tested via Storybook examples with:

  • simple template literal snippets
  • nested indentation (YAML)
  • JavaScript snippets
  • snippets with surrounding empty lines

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 CodeBlock that could slightly change whitespace/line breaks for consumers relying on exact indentation.

Overview
CodeBlock now dedents string children (removing leading/trailing blank lines and the minimum shared space indentation) before passing code to BaseCodeBlock and CopyToClipboardButton, fixing extra indentation when snippets are provided via JSX template literals.

Adds a new dedent utility 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.

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

/>
>
{codeString}
</BaseCodeBlock>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Additional Locations (1)
Fix in Cursor Fix in Web

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants