ツール
入力
結果
結果はここに表示されます。サーバーでレンダリングされたページ、メールのテンプレート、スクレイパーで取り出した HTML は、たいてい 1 行の長い文字列で届きます。このツールは js-beautify の HTML 整形機能でマークアップをインデントし直し、インラインの <script> と <style> ブロックはそれぞれ JavaScript と CSS の整形機能に渡すので、埋め込まれたコードも読めるようになります。空白が意味を持つ要素は尊重されます。<pre> と <textarea> の中身は元のまま残り、<b> や <a> のようなインライン要素はテキストの行の中にとどまります。
動作のしくみ
- 長い行は指定した列で折り返します。0 にすると折り返しません。
- 属性は既定ではタグの行に残りますが、1 行に 1 つずつにもできます。揃えて並べるか、閉じかっこを独立した行に置くかを選べます。
- <head> と <body> は、一般的な慣習どおり既定では <html> と同じ深さに置かれます。1 段ネストしたい場合はインデントのオプションをオンにしてください。
データの行き先
どこにも行きません。このツールは完全にブラウザ内で動作します。貼り付けたテキストはページが処理し、サーバーに送信されることも、ログに記録されることもありません。
このツールは無料で登録不要です。結果は開いているページの中にだけあり、どこにも保存されません。
必要なポイント
このツールは無料です。ログインもポイントも必要ありません。
よくある質問
- 整形するとページの表示が変わりますか？
- ほとんどの場合、変わりません。ブロック要素の間の空白はレイアウトに影響せず、インライン要素は行の中に保たれるので、単語の間に隙間が生じることもありません。空白が見た目に現れる <pre> と <textarea> の内容には一切触れません。
- JSX、Vue、Handlebars のテンプレートにも使えますか？
- js-beautify は Handlebars の {{ }} や Django 形式の {% %} タグを、壊さずに保てる程度には認識します。JSX や Vue の単一ファイルコンポーネントには、Prettier のように実際にそれらをパースできる整形ツールが必要です。そうでないと、埋め込まれた式の空白が誤って調整されることがあります。
- 出力のネストが壊れたままなのはなぜですか？
- 整形ツールは与えられたものをインデントし直すだけで、修復はしないからです。閉じられていない <div> はまだ開いているものとしてインデントされるので、出力のインデントを見れば間違いの場所が正確にわかります。正式な判定が必要なら W3C バリデーターを使ってください。
背後にあるオープンソース
このツールは beautifier/js-beautify（MIT）の上で動作しています。同じ処理を自分のプログラムに組み込みたい場合は、そのライブラリを使ってください。
beautifier/js-beautify別の呼び方
- html 整形
- html beautifier
- html 整形 オンライン
- html フォーマッター
- html インデント
- html 見やすく