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 and uses Prettier under the hood.

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>