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:
<!-- pug template code -->doctype htmlhtmlheadtitlebodyh1br/<!-- self closing tag -->p<!-- compiled html code --><!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:
<!-- pug template code -->doctype htmlhtmlheadtitle GeeksForGeeksbodyh1 Welcome to GeeksForGeeks<!-- compiled html code --><!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:
<!-- pug template code -->doctype htmlhtmlheadtitle GeeksForGeeksbodypThis is a paragraph which isspread across multiple lines<!-- compiled html code --><!DOCTYPE html><html><head><title>GeeksForGeeks</title></head><body><p>This is a paragraph which isspread across multiple lines</p></body></html> - To save space, pug provides an inline syntax for nested tags. It is called Block Expansion. Example:
<!-- pug template code -->doctype htmlhtmlheadtitle GeeksForGeeksbodya: img<!-- compiled html code --><!DOCTYPE html><html><head><title>GeeksForGeeks</title></head><body><a><img/></a></body></html>