HTML Blocks

How the formatter indents HTML blocks within MDX content

The formatter properly indents HTML blocks within MDX content. This is controlled by the formatHtmlBlocksInMdx option using a built-in indentation formatter.

Rules

• HTML blocks (dl, table, div, ul, ol, form, etc.) are properly indented

• Content whitespace in dt/dd elements is trimmed

• Nested HTML structures maintain correct indentation hierarchy

Examples

Definition list

Before:

<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>

After:

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

Definition list with div wrappers

Before:

<dl>
<div>
<dt>Term 1</dt>
<dd>Definition 1</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</div>
</dl>

After:

<dl>
  <div>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
  </div>
  <div>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </div>
</dl>

Whitespace trimming in dt/dd

Before:

<dl>
  <dt>  Term with spaces  </dt>
  <dd>   Definition with spaces   </dd>
</dl>

After:

<dl>
  <dt>Term with spaces</dt>
  <dd>Definition with spaces</dd>
</dl>

Nested HTML structures

Before:

<dl>
<dt>Outer Term</dt>
<dd>
<dl>
<dt>Inner Term</dt>
<dd>Inner Definition</dd>
</dl>
</dd>
</dl>

After:

<dl>
  <dt>Outer Term</dt>
  <dd>
    <dl>
      <dt>Inner Term</dt>
      <dd>Inner Definition</dd>
    </dl>
  </dd>
</dl>

Unordered list

Before:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

After:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Nested divs

Before:

<div class="container">
<div class="row">
<div class="col">Content</div>
</div>
</div>

After:

<div class="container">
  <div class="row">
    <div class="col">Content</div>
  </div>
</div>