HTML Formatter

概要

• タグが1行に詰め込まれたHTMLを、Prettierを使ってインデント・改行の整った読みやすい形式に整形するツールです。

• 属性のクォートや改行など、Prettierの標準的なルールに従って一貫したスタイルに整えます。

• HTMLメールのテンプレートやコンポーネントの出力結果など、HTMLソースを目視で確認したい場面で使います。

使い方

1. 1

   テキストエリアに整形したいHTMLを入力します。

2. 2

   「整形する」ボタンをクリックします。

3. 3

   インデント整形された結果が下部に表示されます。「コピー」ボタンで結果をクリップボードにコピーできます。

入力例・出力例

<div><p>hello</p></div>

<div><p>hello</p></div>

利用シーン

• サーバーサイドレンダリングやテンプレートエンジンが出力した1行のHTMLを、デバッグ用に整形する

• 他サイトのHTMLソースを参考にする際、読みやすい形に整えてから確認する

• コードレビューやドキュメントに掲載するHTMLスニペットを、一貫したスタイルに整える

よくある質問

注意点

• 閉じタグの対応が誤っているなど、構文として不正なHTMLを入力すると整形に失敗します。

• 属性のクォートや改行は、入力時の書式に関わらずPrettierの標準ルールに統一されます。

• 非常に大きなHTMLを入力すると、ブラウザの処理が重くなる場合があります。