formatHtmlBlocksInMdx

Format HTML blocks within MDX content using Prettier

Format HTML blocks within MDX content using Prettier. Applies to standard HTML elements like <dl>, <table>, <div>, <ul>, etc.

Options

Property	Type	Default	Description
`enabled`	`boolean`	`true`	Enable/disable this rule
`formatterConfig`	`object`	see below	Prettier configuration for HTML formatting
`formatterConfig.parser`	`string`	`"html"`	Prettier parser to use
`formatterConfig.tabWidth`	`number`	`2`	Number of spaces per indentation level
`formatterConfig.useTabs`	`boolean`	`false`	Use tabs instead of spaces

Config

{
  "formatHtmlBlocksInMdx": {
    "enabled": true,
    "formatterConfig": {
      "parser": "html",
      "tabWidth": 4,
      "useTabs": false
    }
  }
}

Line Wrapping

The formatter uses a very large print width internally, so HTML content is not wrapped to a specific line length. Only indentation and whitespace normalization are applied.

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>

Nested HTML structures

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>

Table

Before:

<table>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>100</td>
</tr>
</tbody>
</table>

After:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>100</td>
    </tr>
  </tbody>
</table>