HTMLからPugへの変換
無料でオンラインで利用可能 HTMLからPugへの変換 インストール不要のツール
HTML を Pug に変換について
ブラウザの DOMParser を使用して、HTML マークアップを Pug（旧 Jade）テンプレート構文に変換します。コンバータはクリーンな Pug の短縮記法を生成します。div タグが class または id を持つ場合は div タグ名が省略され、class は .class セレクタに、id は #id セレクタになり、残りの属性は括弧内に出力されます。
使い方
1. HTML を HTML 入力テキストエリアに貼り付けます。 2. インデントサイズ（1-8）を設定し、必要に応じてタブ使用とシングルクォートを切り替えます。 3. 変換をクリックします。 4. Pug 出力カードのコピーを使用して結果をコピーします。
Pug 変換ルール
インデントには設定された数のスペースまたは単一のタブが使用されます。属性値はシングルクォートオプションに基づき、シングルクォートまたはダブルクォートを使用します。class 属性と id 属性は .class / #id の短縮記法に変換されて属性リストから削除されます。style 属性は括弧の後に style="..." として保持されます。子を持たない空要素（img、br、input、hr、meta、link など）は末尾に / を付けて自己閉鎖されます。単一のテキスト子はタグの後にインラインで配置され、複数の子は後続の行にネストされます。単独のテキストノードにはパイプ（| ）のプレフィックスが付きます。
▶<div class="card highlight" id="main"> 要素はどのように変換されますか？
タグが div であるため、タグ名は省略され、要素は Pug の短縮記法で #main.card.highlight になります。id を先に、次にドット付きの class を使用します。
▶インライン style 属性は保持されますか？
はい。style 属性は括弧内の属性リストには含まれません。代わりに style="<value>"（シングルクォートオプションがオンの場合はシングルクォート）として括弧の後に付加されます。
▶自己閉鎖要素と空要素はどのように処理されますか？
子を持たない既知の空要素（area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr）は末尾にスラッシュを付けて出力されます。例：img(src="x.png")/。
▶インデントにスペースとタブのどちらを選べますか？
タブを使用するにはタブ使用を切り替えます。オフのままにしてインデントサイズを 1 から 8 の間で設定すると、レベルごとのスペース数を制御できます。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。