Как применить стиль и разметку из примера?

Question

[LINEAGE]

Я хочу сделать под себя данный пример

Объясните - как он должен работать ?

В примере разметка выглядит так

form(onsubmit=`return false;`)
  label(for='password') Password
  input#password(type='password', pattern='password123', placeholder="Enter your password", required, title="Wasn't your password \"password123\"? ")
  input#login(type='checkbox')
  label.login-button(for='login')
    span Enter
    svg
      path(d="M10,17V14H3V10H10V7L15,12L10,17M7,2H17A2,2 0 0,1 19,4V20A2,2 0 0,1 17,22H7A2,2 0 0,1 5,20V16H7V20H17V4H7V8H5V4A2,2 0 0,1 7,2Z")
  .padlock
    .padlock__hook
      .padlock__hook-body
      .padlock__hook-body
    .padlock__body
      .padlock__face
        .padlock__eye.padlock__eye--left
        .padlock__eye.padlock__eye--right
        .padlock__mouth.padlock__mouth--one
        .padlock__mouth.padlock__mouth--two
        .padlock__mouth.padlock__mouth--three
  .app
    h1 You logged in! 
    button.logout-button(type='reset') Logout
  span.logout-message You have logged out.

Но тут нет открывающих/закрывающих тэгов, это сохраняется просто как текст в файле .html.

Как я могу перенести данный пример в свои файлы и отобразить в браузере так же ?

Comments

[Alex_mos]

тут нет открывающих/закрывающих тэгов

это pug видимо.

Как я могу перенести данный пример в свои файлы и отобразить в браузере так же ?

можно тут попробовать

Answer 1

[Антон Неверов]

То, что вы предоставили - это формат шаблонизатора Pug. Ещё такие штуки называют препроцессорами HTML. Они аналогичны препроцессорам CSS: Sass, SCSS и другим. Позволяют меньше писать и кому-то нравятся больше. В чём-то удобнее и, самое главное, умеют работать с JavaScript.

В вашем случае, чтобы получить чистый HTML достаточно нажать на кнопку View Compiled HTML:

Comments

[LINEAGE]

Все, понял, спасибо за помощь )