Конвертер HTML в Pug

Преобразуйте HTML в синтаксис шаблона Pug

Теги: html pug конвертер шаблонов конвертировать код

Пример

🚀 194,724 всего преобразований (4 в этом месяце)

Что это за инструмент?

Этот бесплатный онлайн-инструмент позволяет быстро преобразовать стандартный HTML в чистые, отформатированные шаблоны Pug. Он идеально подходит для разработчиков, использующих Node.js и современные веб-фреймворки, которые предпочитают читаемый и поддерживаемый код.

Как использовать

Вставьте ваш HTML-код в редактор или введите его вручную.
Нажмите Преобразовать, чтобы сгенерировать соответствующий код Pug.
Скачайте, скопируйте или поделитесь результатом с уникальной ссылкой.

Вы также можете войти с помощью Google или GitHub, чтобы сохранить историю ваших преобразований для будущего использования.

Что такое Pug?

Pug — это высокопроизводительный шаблонизатор для Node.js, вдохновленный Haml. Он заменяет традиционный 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 Вы потрясающие
      else
        p Начинайте использовать!
      p.
        Pug — это лаконичный и простой язык шаблонов
        с сильным акцентом на производительность и функциональность.

Пример 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>Вы потрясающие</p>
      <p>Pug — это лаконичный и простой язык шаблонов с сильным акцентом на производительность и мощные функции.</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 Вы потрясающие
      p Pug — это лаконичный и простой язык шаблонов с сильным акцентом на производительность и мощные функции.