In this article, we will learn about pug basic tags and see how they get compiled into HTML code.
Project Setup:
Step 1: Install pug by running the following command. -g is for global install and it is optional.
npm install pug-cli -g
Step 2: Open the project folder code editor. Make an index.pug file, and an index.html file in the root project directory. Inside html, make an index.html file. Our directory structure will now look like this:
Project Structure
Step 3: Now we will write pug template code in index.pug file and see it’s HTML output in index.html file. For automatic re-compiling of pug template code to HTML on file save, run below command in the terminal:
pug -w ./ -o ./html -P
“-w ./”means watch any changes in pug file in the current directory, “-o ./html -P” means save the output in html file in the current directory and pretty print it (format it correctly). You should get the following upon running the command:
Now let’s understand tags in PugJS and see the corresponding compiled HTML.
- Pug uses the same set of HTML tag names but it doesn’t have opening and closing tags. It uses indentation for nesting HTML tags. A boilerplate pug skeleton structure and it’s compiled HTML would look like:
doctype html
html
head
title
body
h1
br/
p
<!DOCTYPE html>
< html >
< head >
< title ></ title >
</ head >
< body >
< h1 ></ h1 >
< br />
< p ></ p >
</ body >
</ html >
|
- For rendering content inside a HTML tag, we give a space character and the write the content of that tag. Example:
doctype html
html
head
title GeeksForGeeks
body
h1 Welcome to GeeksForGeeks
<!DOCTYPE html>
< html >
< head >
< title >GeeksForGeeks</ title >
</ head >
< body >
< h1 >Welcome to GeeksForGeeks</ h1 >
</ body >
</ html >
|
- For multiline content, just after the paragraph tag, add a “.” (dot) and then on the next line, indent it with a tab space. It is called Tag Interpolation. Example:
doctype html
html
head
title GeeksForGeeks
body
p
This is a paragraph which is
spread across multiple lines
<!DOCTYPE html>
< html >
< head >
< title >GeeksForGeeks</ title >
</ head >
< body >
< p >
This is a paragraph which is
spread across multiple lines
</ p >
</ body >
</ html >
|
- To save space, pug provides an inline syntax for nested tags. It is called Block Expansion. Example:
doctype html
html
head
title GeeksForGeeks
body
a: img
<!DOCTYPE html>
< html >
< head >
< title >GeeksForGeeks</ title >
</ head >
< body >
< a >< img /></ a >
</ body >
</ html >
|
Last Updated :
18 Aug, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...