Конвертировать код HTML в шаблоны Pug — Numio
Преобразуйте HTML в синтаксис шаблонов Pug (ранее Jade), который использует отступы вместо закрывающих тегов. Переключайтесь между полным документом и HTML-фрагментом и выбирайте табуляцию, запятые и стиль кавычек. HTML отправляется на сервер для преобразования.
Начать шаблон Pug с существующей HTML-разметки.
Когда пригодится
- Начать шаблон Pug с существующей HTML-разметки.
- На коротком фрагменте проверить, как атрибуты и вложенность отображаются в Pug, прежде чем преобразовывать целую страницу.
Как пользоваться
- Вставьте HTML или загрузите пример (HTML-фрагмент, атрибуты формы, HTML-документ). Загрузка примера заменяет ваш ввод.
- Включите режим фрагмента, чтобы преобразовать только фрагмент без обёрток html, head и body. В примере ниже используется режим фрагмента с включёнными табуляцией и запятыми и выключенными двойными кавычками.
- Скопируйте Pug и скомпилируйте его в своей сборке Pug, чтобы проверить итоговый HTML.
HTML
<section class="card"><h2>News</h2><p>Registration is open</p></section>
Результат Pug (режим фрагмента, табуляция и запятые включены)
section.card h2 News p Registration is open
Подробности и ограничения
Когда режим фрагмента выключен, HTML обрабатывается как документ, и могут быть добавлены html, head и body. Включите его, если нужны только элементы.
Смешивание табуляции и пробелов может изменить отношения родитель–потомок в Pug. Придерживайтесь стиля отступов вашего проекта.
Повторяющийся HTML не превращается в циклы each, миксины или переменные Pug, а внешние CSS, изображения и скрипты не включаются.
HTML-парсер может исправлять незакрытые теги. Успешное преобразование не означает, что HTML валиден, и не гарантирует идентичную страницу.
FAQ
Почему добавляются теги html и body?
В режиме документа парсер достраивает внешние элементы. Включите режим фрагмента, чтобы преобразовать HTML компонента без обёрток.
Можно ли преобразовать HTML в Pug в VS Code или из командной строки?
Эта страница использует пакет с открытым исходным кодом html2pug. Установите его из npm, чтобы преобразовывать файлы в скрипте или из командной строки, или продолжайте пользоваться этой страницей для коротких фрагментов.
Как превратить Pug обратно в HTML?
Эта страница преобразует только HTML в Pug. Скомпилируйте шаблон самим Pug — например, с помощью пакета pug-cli, — чтобы снова получить HTML.
Загружается ли мой HTML на сервер?
Да, он отправляется на сервер douni.one для преобразования. Используйте код, которым можно делиться, и предварительно удалите API-ключи и данные клиентов.