Чтобы получить читабельную верстку из Jade, первым шагом является установка Jade, который был переименован в Pug. Вы можете установить Pug, используя npm (Node Package Manager). Для этого выполните команду npm install pug -g. После установки Pug можно использовать для создания файлов с расширением .pug и затем скомпилировать их в HTML-файлы, которые будут содержать читаемую верстку.
Чтобы создать Pug-файл, откройте текстовый редактор и создайте новый файл. Затем сохраните его с расширением .pug. Внутри этого файла можно использовать различные элементы Pug для создания структуры верстки.
Например, можно начать с создания основного контейнера, используя элемент div. Он может выглядеть следующим образом:
div.container
Это создаст div с классом "container". Вы можете добавить дополнительные классы, атрибуты или текстовое содержимое, используя различные элементы Pug.
Для создания вложенных элементов внутри контейнера, вы можете использовать отступы в Pug. Например:
div.container h1 Заголовок p Текстовое содержимое
В этом примере заголовок и параграф будут вложены в контейнер. Обратите внимание на отступ перед каждым элементом, это указывает на их вложенность.
После создания Pug-файла, вы можете скомпилировать его в HTML. Для этого в терминале перейдите в папку с вашим Pug-файлом и выполните команду pug <filename>.pug, где <filename> - имя вашего Pug-файла без расширения. Например, если ваш файл называется index.pug, выполните команду pug index.pug.
После выполнения эта команда создаст новый файл с тем же именем, но с расширением .html, содержащий скомпилированный HTML, основываясь на Pug-файле.
Вы можете открыть этот HTML-файл в любом браузере и увидеть читаемую верстку, созданную из Pug.
Таким образом, чтобы получить читабельную верстку из Pug, вам нужно установить Pug, создать Pug-файл, добавить в него нужные элементы и затем скомпилировать его в HTML-файл. При этом используйте отступы для указания вложенности элементов и различные элементы Pug для создания структуры верстки.