HTML to Pug コンバーター

HTMLをPugテンプレート構文に変換

サンプル

🚀 194,724 合計変換 (4 今月)

このツールとは？

この無料オンラインツールを使用すると、標準のHTMLをクリーンでインデントされたPugテンプレートに素早く変換できます。Node.jsやモダンなウェブフレームワークを使用する開発者にとって、読みやすくメンテナンスしやすいコードを好む方に最適です。

使い方

エディタにHTMLコードを貼り付けるか、手動で入力します。
変換をクリックして、対応するPugコードを生成します。
結果をダウンロード、コピー、またはユニークなリンクで共有します。

また、GoogleまたはGitHubでサインインして、変換履歴を保存し、将来の利用に備えることもできます。

Pugとは？

Pugは、Hamlに触発されたNode.jsの高性能テンプレートエンジンです。従来のHTMLを簡潔で空白に敏感な構文に置き換え、コードの明確さを向上させ、繰り返しを減らします。

Pugは、Express.jsで構築されたウェブアプリで一般的に使用され、コードの再利用性、ロジックの埋め込み、よりクリーンなインデントなどの高度な機能を提供します。

詳しくは、公式Pugドキュメントをご覧ください。

Pug構文の例


doctype html
html(lang="en")
  head
    title= pageTitle
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language
        with a strong focus on performance and features.

HTML vs Pugの例

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

Pug


doctype html
html(lang="en")
  head
    title Pug
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      p You are amazing
      p Pug is a terse and simple templating language with a strong focus on performance and powerful features.