mdx-formatter
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

formatHtmlBlocksInMdx

このページはまだ翻訳されていません。原文のまま表示しています。

Format HTML blocks within MDX content with proper indentation

Format HTML blocks within MDX content with proper indentation. Applies to standard HTML elements like <dl>, <table>, <div>, <ul>, etc. Uses a built-in indentation formatter in the Rust engine.

Options

PropertyTypeDefaultDescription
enabledbooleantrueEnable/disable this rule
formatterConfigobjectsee belowFormatter configuration
formatterConfig.tabWidthnumber2Number of spaces per indentation level
formatterConfig.useTabsbooleanfalseUse 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>

Revision History

作成更新