Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
javascript
jade
pug
syntax

What is PUG Syntax?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
widget

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

RELATED TAGS

html
javascript
jade
pug
syntax

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring