Getting started with pug

Pug.js tutorial : Pug - syntax

Pug tutorial series pugjs tutorial introduction



Overview

In this part of the pugjs tutorial series we will learn about the basic syntax of a simple pug document.

Syntax of a .pug document

The syntax of a .pug document is somewhat similar to HTML except few differences which includes :

  1. Tags are not included in angular brackets
  2. We don't have closing tags
  3. Indentation defines the starting and ending of blocks
These are some of the very basic differences between a .pug and .html document. An example of a .pug document with proper syntax is given below :
											
//Name of the file : pug-syntax.pug
doctype html
html(lang='en')
  head
    title  Pugjs Tutorial | Pug Syntax | Nodejsera
  body
    div
      h1  Pug Syntax 
    #main.main-class
      p This is a single line paragraph
      p
        | This is
        | a multiline
        | Paragraph.
  script(src='myscript.js')	

											
										

Please note that all the above tags are explained in full detail in the Pug Templating with HTML section of pug.js tutorial series.
You can run the above code using the following command :
											
>pug pug-syntax.pug

  rendered pug-syntax.html
											
										

Now open the pug-syntax.html file transformed from pug as shown below :
											
<!--Name of the file : pug-syntax.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Pugjs Tutorial | Pug Syntax | Nodejsera</title>
    </head>
    <body>
        <div>
            <h1> Pug Syntax </h1>
        </div>
        <div class="main-class" id="main">
            <p>This is a single line paragraph</p>
            <p>This is
                a multiline
                Paragraph.
            </p>
        </div>
    </body>
    <script src="myscript.js"></script>
</html>
											
										

What we learned

In this article we learned about the basic syntax of a simple .pug document.

Repository

Get it from :