HTML → Pug 変換｜断片・フォーム・文書に対応
HTML を Pug のインデント構文に変換します。ページ全体と HTML の断片を切り替え、属性の引用符やインデントを調整できます。HTML は変換のためサーバーに送信されます。
既存の HTML から Pug テンプレートの下書きを作る。
HTML は変換のためサーバーに送信されます。機密情報を含まないコードを使ってください。
こんなときに使えます
- 既存の HTML から Pug テンプレートの下書きを作る。
- フォームの属性や入れ子を、短いサンプルで確かめる。
使い方
- 「HTML の断片」「フォームの属性」「HTML 文書」から例を読み込むか、自分の HTML を貼り付けます。例を選ぶと現在の入力を置き換えます。
- 部品だけを変換する場合は「断片モード」をオンにします。下の出力例は、断片モード・タブ・カンマをオン、二重引用符をオフにした結果です。
- 右側の Pug をコピーし、利用する Pug 環境でコンパイルして表示を確認します。
入力例
<section class="card"><h2>お知らせ</h2><p>受付中です</p></section>
出力例
section.card h2 お知らせ p 受付中です
仕様と注意点
断片モードをオフにすると、HTML 文書として html・head・body が補われる場合があります。要素だけが必要ならオンにしてください。
タブとスペースを混ぜると、Pug の親子関係が変わることがあります。利用先のインデント規約に合わせてください。
HTML の繰り返しから Pug の each・mixin・変数を自動設計する機能はありません。CSS・画像・外部スクリプトも取り込みません。
HTML パーサーが不完全なタグを補う場合があります。変換の成功は HTML の厳密な検証や画面の同一性を保証しません。
入力内容は同じタブ内に一時保存され、再読み込みや同じ入力形式のツールで再表示される場合があります。共用端末では、使い終わったら入力欄をクリアしてください。
よくある質問
VS Code やコマンドラインで HTML を Pug に変換するには？
このページはオープンソースの html2pug パッケージで変換しています。npm でインストールすると、スクリプトやコマンドラインでファイルを変換できます。短いコードの確認にはこのページを使えます。
Pug を HTML に戻せますか？
このページは HTML → Pug 専用です。Pug を HTML に戻すには、pug-cli パッケージなど Pug 本体でテンプレートをコンパイルしてください。
html や body が勝手に追加されます。
文書モードではパーサーが外側の要素を補います。「断片モード」をオンにすると、部品の HTML をラッパーなしで変換できます。
変換できないときは何を確認すればよいですか？
属性値の引用符とタグの入れ子を確認し、問題がある部分だけで試してください。接続エラーなら入力を保ったまま「再試行」を押せます。
入力した HTML はブラウザだけで処理されますか？
このツールはサーバーで変換します。公開してよい短いコードを使い、API キーや顧客情報を含めないでください。