In this part of the pugjs tutorial series we will learn about the basic syntax of a simple pug document.
.pug
document
The syntax of a .pug
document is somewhat similar to HTML
except few differences
which includes :
.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')
>pug pug-syntax.pug
rendered pug-syntax.html
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>
In this article we learned about the basic syntax of a simple .pug
document.