Paragraphs in Pug View Engine

Pug is a template engine for NodeJS and browsers, enabling dynamic content rendering. It compiles templates to HTML, supports JavaScript expressions for formatting, and facilitates the reuse of static pages with dynamic data. Its indentation-based syntax simplifies tag specification, enhancing readability.

What are Paragraphs in Pug?

The p tag defines a paragraph. A paragraph is a block-level element so a new paragraph always begins on a new line, and browsers naturally put some space before and after a paragraph to make it look neat and easy to read. If users add multiple spaces, the browser reduces them to a single space.

Syntax to write Paragraphs in Pug:

p    This is our first paragraph

// Multiline paragraph with indentation
p.    
     paragraph content
     paragraph content

Syntax to use em or i tag in paragraph:

p paragraph content #[ em   text that is to be emphasized ] 
                             OR
p  paragraph content
i  text to be represented in italic

Approach to Create a Paragraph in Pug

• Express Setup: Initializes an ExpressJS server.
• Setting View Engine: Configures Pug as the view engine for rendering templates.
• Routing: Defines a single route for the root URL (/). When accessed, it renders the paragraph Pug template.
• Pug Template: The Pug template defines the structure and content of the HTML page. It includes a paragraph with headings
• Styling: Internal CSS is used within the Pug template (style.) to set margins and styles for headings and the paragraph.

Steps to Create a Pug 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 paragraph.pug file.

Project Structure:

Project Structure

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

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

Example 1: Below is an example of creating a Pug Paragraph.

HTML

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Paragraph 
        style.
          body {
            margin:2rem;
            font-family:  Times, serif; 
          }  
          h1,h3,em {
            margin: 1rem ;
            text-align: center;
            color:green;
            }
    body 
        h1 Welcome to GeeksforGeeks
        h3 Paragraph 1
        p Pug is a template engine for node.js and browsers to render dynamic reusable content.While writting the pug template one should consider the indentation

        h3 Paragraph 2 with emphasize text
        p At compile time the template engine compiles our pug template code to HTML .Pug  has many powerful features like #[em conditions,loop,include and mixins] using which we can render HTML code based on user input or reference data.

Javascript

//app.js

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

Output:

Paragraph in Pug

Paragraph with br Tag

Br tag is used to add single line break.We can directly add <br> in pug template or add br on new line in paragraph.Br tag is followed by the pipe “|” ,followed by the text content.

Syntax:

p  paragraph content
br
|   text content

Example 2: Below is an example of paragraph with <br> tag.

HTML

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Paragraph 
        style.
          body {
            margin:1.5rem;
            font-family:  Times, serif; 
          }  
          h1,h3,i {
            margin: 1rem ;
            text-align: center;
            color:green;
            }
    body 
        h1 Welcome to GeeksforGeeks
        h3 Paragraph with br and italic tag
        p Pug is a template engine for node.js and browsers to render dynamic reusable content.  While writting the pug template one should consider the indentation.
        br 
        |   At compile time the template engine compiles our pug template code to HTML .
        i Pug  has many powerful features like  conditions,loop,include and mixins using which we can render HTML code based on user input or reference data.

Javascript

//app.js

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

Output:

Paragraph in Pugjs