Pug template syntax

Pug

Basic Element

pug

1
a(class='button' href='google.com') Google

html

1
<a class="button" href="google.com">Google</a>

HTML

input
pug

1
2
3
4
5
6
7
8
9
10
doctype html
html(lang="en")
  head
    title= pageTitle
    link(href='https://unpkg.com/sakura.css/css/sakura.css', rel='stylesheet')
  body
    h1 Pug - node template engine
    #container.col
      Pug is a terse and simple templating language with a
      strong focus on performance and powerful features.

html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

Varriable

pug

1
2
url = 'https://example.com/'
a(href=url) Another link

html

1
<a href="https://example.com/">Another link</a>

Escape

pug

1
div(data="<hello_world>")

html

1
<div data="&lt;hello_world&gt;"></div>

Inline style css

pug

1
a(style={color: 'red', background: 'green'})

html

1
<a style="color:red;background:green;"></a>

Mixin (function)

pug

1
2
3
4
5
6
mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item

+list('my-list', 1, 2, 3, 4)

html

1
2
3
4
5
6
<ul id="my-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Cli

pug-cli

Reference

https://pugjs.org/api/getting-started.html