Skip to content

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

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

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

Conversation

@x0rgus
Copy link

@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 UI formatting change that normalizes whitespace before rendering/copying code; main risk is subtle behavior changes for snippets that intentionally rely on leading spaces.

Overview
Normalizes indentation for code passed as JSX template literals. CodeBlock now runs extracted children text through a new dedent utility to trim leading/trailing blank lines and remove the minimum shared space indent before rendering and copying.

Adds Storybook coverage with new TemplateLiteral* stories (bash/yaml/js and empty-line cases) to demonstrate the updated rendering behavior.

Written by Cursor Bugbot for commit e76c01b. 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.

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.

1 participant