indentJsxContent

Add indentation to content inside JSX container components

Add indentation to content inside JSX container components.

Disabled by default. You must specify which components to indent via containerComponents.

Options

Config

{
  "indentJsxContent": {
    "enabled": true,
    "indentSize": 2,
    "containerComponents": ["Outro", "InfoBox", "LayoutDivide"]
  }
}

Examples

Basic content indentation

With containerComponents: ["Outro"]:

Before:

<Outro>

This is the outro content.
Multiple lines here.

</Outro>

After:

<Outro>

  This is the outro content.
  Multiple lines here.

</Outro>

List content indentation

With containerComponents: ["LayoutDivideItem"]:

Before:

<LayoutDivideItem>

- List item 1
- List item 2
- List item 3

</LayoutDivideItem>

After:

<LayoutDivideItem>

  - List item 1
  - List item 2
  - List item 3

</LayoutDivideItem>

Non-listed components are not indented

Components not in containerComponents are left alone:

<SomeOtherComponent>

Content stays as-is.

</SomeOtherComponent>

This stays unchanged.

Caution with markdown content

Do not use this option on components that contain markdown content (admonitions like <Note>, <Warning>, <Danger>, <Tabs>, <TabItem>, etc.).

In standard markdown, 4 or more spaces of indentation creates a code block. If you indent markdown content inside a JSX component, the markdown parser may misinterpret the content.

For example, with containerComponents: ["Note"] and indentSize: 4:

<Note>

    This looks like a code block to the markdown parser.

    - This list won't render as a list either.

</Note>

Even with indentSize: 2, combining with already-indented content (like nested lists or code blocks) can push lines past the 4-space threshold.

What to use instead

For admonition-like components, use addEmptyLinesInBlockJsx instead. It adds the blank lines needed for MDX to parse content as markdown, without changing indentation:

<Note>

**This bold text** renders correctly.

- Lists work too

</Note>

When indentJsxContent is safe

This option works well for components whose children are not parsed as markdown — for example, layout wrappers that contain other JSX components rather than prose:

<LayoutDivide>

  <LayoutDivideItem>
    Content here
  </LayoutDivideItem>

  <LayoutDivideItem>
    Content here
  </LayoutDivideItem>

</LayoutDivide>