Comments in Pug View Engine

Pug is a template engine for NodeJS and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, etc. using which we can render HTML code based on user input or reference data. Pug also supports JavaScript natively, hence using JavaScript expressions, we can format HTML code.

Comments in Pug

Comments are used to explain the code , to set reminders, or instructions for developers who are collaborating on the same project. It can be used to prevent the execution of a section of code if necessary. Comments are not displayed on browsers while rendering the page making them useful to add additional information without affecting the appearance of the webpage. We can comment single line of code or the multiple line of the code.

Syntax for single line comment

// Single line Comment.

Multiline Syntax for multiline comment

//-
     Multiline Comment
     Multiline Comment

Approach to add Comments in Pug View Engine

• Setting Up ExpressJS: The code initializes an Express.js server.
• Setting View Engine: It sets Pug as the view engine for rendering templates.
• Routing: There’s a single route defined for the root URL (/). When a user accesses this URL, it renders the Pug template.
• Pug Template: The Pug template defines the structure and styling of the HTML page.
• Styling: The styling is done using CSS embedded within the Pug template (style.). It sets styles for the body, headings, and container.

Steps to Create a Pug List Application

Step 1: Create a NodeJS Application using the following command:

npm init -y

Step 2: Install required dependencies using the following command:

npm i pug express

Step 3: Create a views folder that contains the comment.pug file.

Project Structure:

Folder Structure

The updated dependencies in package.json file will look like:

"dependencies": { 
    "express": "^4.18.2", 
    "pug": "^3.0.2"
}

To Run the Project:

node app.js

Single Line Comment

The comment that takes only one line to describe any information is called as single line comment.

Example: Below is an example of Pug Single Line Comment.

HTML

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Comment 
        style.
          body {
            margin:1.5rem;
            font-family:  Times, serif; 
          }  
          h1,h3 {
            margin: 1rem ;
            text-align: center;
            color:green;
            }
    body 
        h1 Welcome to GeeksforGeeks
        h3 Single line Comment
        //  Pug is a template engine for node.js .
        

Javascript

//app.js

const express = require("express");
const app = express();
const port = 3000;
app.set("view engine", "pug");
app.get("/", (req, res) => {
  res.render("comment");
});
app.listen(port, () => {
  console.log(`server is running at http://localhost:${port}`);
});

Output:

Multiple Line Comment

The comments that takes only multiple lines to describe any information is called as single line comment.

Example: Below is an example of Pug Multiple Line Comment.

HTML

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport"
           , content="width=device-width,
                      initial-scale=1.0")
        title Comment 
        style.
          body {
            margin:1.5rem;
            font-family:  Times, serif; 
          }  
          h1,h3 {
            margin: 1rem ;
            text-align: center;
            color:green;
            }
    body 
        h1 Welcome to GeeksforGeeks
        h3 Multiline line Comment
        //-
          Pug is a template engine for node.js .
          Pug is a template engine for node.js .
        

Javascript

//app.js

const express = require("express");
const app = express();
const port = 3000;
app.set("view engine", "pug");
app.get("/", (req, res) => {
  res.render("comment");
});
app.listen(port, () => {
  console.log(`server is running at http://localhost:${port}`);
});

Output: