What is PUG Syntax?

About PUG

pug.js, also known as PUG, is a Javascript library that was previously known as JADE. It is an easy-to-code template engine used to code HTML in a more readable fashion. One upside to PUG is that it equips developers to code reusable HTML documents by pulling data dynamically from the API.

PUG syntax is sensitive to indentation/whitespace

Here are some standard syntaxes of PUG.

1. Attributes

You can simply write the attributes inside the parenthesis and separate multiple attributes with either a space ' ' or a comma ,
Bear in mind that the actual value of the attribute is a Javascript expression
Attributes can span over multiple lines as well

// Single attribute
a(href='//educative.io') Educative
// Multiple attributes separated by a comma
a(href='//educative.io', target='_blank')
// Attributes spanning over multiple lines
img(
    alt='Edpresso logo'
    src='logo.png'
    width='50'
    height='50'
    style="border:6px solid black;float:left;"
)

2. Case

Case statements work just like JavaScript switch statements.

Start with the keyword case
Use the keyword when to specify a condition
Add a default expression using the keyword default

//- Generating a random number between 0 and 99
- var number = Math.floor(Math.random() * 100)

//- using case to figure out in what range is the number
case number
    when number < 25
        p Number is between 0 and 24 inclusive
    when number < 50
        p Number is between 25 and 49 inclusive
    when number < 75
        p Number is between 50 and 74 inclusive
    default
        p Number is between 75 and 99 inclusive

3. Code

Unbuffered Code vs. Buffered Code

Unbuffered Code starts with a hyphen - and does not directly output anything. It can be used in the PUG code later to make changes.
Buffered Code starts with =. If there is an expression, it will evaluate it and output the result.

// Unbuffered Code
- var number = 99
- var coffee = 'latte'
- var list = ["Belgium", "France", "China"]

// Buffered Code
p= "99 times 2 is: " + number*2
p= "I prefer " + coffee + " over cappuccino"

4. Comments

Buffered Comments vs. Unbuffered Comments vs. Multiline Comments

Buffered Comments are added using a double forward-slash//. They appear in the rendered HTML file.
Unbuffered Comments are added using the double forward-slash followed by a hyphen//-. They do not appear in the rendered HTML file.
Multiline Comments are added using a double forward-slash // followed by an indented block.

// This is a Buffered Comment

//- This is an Unbuffered Comment

//
    This is
    a multiline
    comment

5. Doctype

To compile a standard HTML5 doc, use doctype followed by html.

doctype html

6. Includes

Use include to add other PUG files.

Caution: adding non .pug files will result in plain text being added to the rendered HTML doc.

// This is playlist.pug
head
    ul 
        li Memories - Adam Lavine
        li Hymm for the weekend - Coldplay
        li Bad Liar - Imagine Dragons

// Using this in my base PUG file
doctype html
html
    body
        h2 My playlist
        include playlist.pug

7. Inheritance

PUG inheritance makes use of the block and extend keywords. You can create a parent template with multiple blocks, which can be extended over the child template to replace those blocks.

//- This is what a typical parent template will contain named layout.pug

doctype html
    html
        head
            h2 Include scripts here
                block scripts
        
        head
            h2 Include your favorite candy name here
            block content

//- Extending this over child template

extend layout.pug

block scripts  
    script(src='courses.js')
    script(type='application/javascript')

block content 
    p   gummy bears

8. Interpolation

Interpolation is an easy way to substitute placeholders in a template with corresponding JavaScript expressions. This can be done using #{}.

// Replacing with a variable
- var name = 'leonard hofstader'

h2 Printing name in all lower caps
    p Dr. #{name}

h2 printing name with first letter of each name in uppercase
    p Dr. #{name.charAt(0).toUpperCase() + name.slice(1, 7) + name.charAt(8).toUpperCase() + name.slice(9)}

9. Iteration

You can iterate over a specific range or list using the each keyword, or you can iterate conditionally using the while keyword.

- var superheroes = ["Spiderman", "Ironman", "Hulk", "Thor"]

// Use of each
ol
    each hero in superheroes
        li = hero

// Use of while

var count = 0

while superheroes[count] != "Hulk"
    count++

p #{superheroes[count]} SMASH!

10. Tags

Tags are what make PUG clean, readable, and easy to code. Instead of having closing tags, PUG relies on whitespace/indentation that is later rendered accordingly to an HTML doc.

// Observe the use of indentation

doctype html
html
    body
        title How to code Tags
            h1 Use proper indentation
                p
                    | The file will not
                    | render properly if the 
                    | programmer does not make
                    | sure of proper indentation

Relevant Answers

Explore Courses

Free Resources

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments