Plain Text in Pug View Engine

Plain text in Pug can be retrieved via a variety of methods, each with its own syntax and advantages. This article will go over many strategies for achieving plain text output in Pug, outlining each approach step by step. We'll also include examples, installation instructions for required modules, package.json dependency updates, and resources for further learning.

We will discuss the following approaches to implement Plain Text in Pug View Engine:

Using `|` followed by text content:

This method requires typing the | character followed by the required plain text. For example:

p
  | This is plain text in Pug.

Using interpolation with `#{}` Syntax:

Interpolation allows you to integrate dynamic content or variables within your text. For plain text, it can be used as follows:

p 
  |#{'This is another way to include plain text in Pug.'}

Using `.` Followed by Text Content:

The `.` followed by text content is another way to add plain text:

p.
  This is yet another method to add plain text.

Steps to Implement Plain Text in Pug View Engine:

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

Project Structure:

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

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

Example: This example implements plain text in Pug View Engine

doctype html
html
  head
    title Example Pug Template
  body
    // Unescaped Text
    p
      | This is plain text.
      | It won't be escaped.

    // Block Expansion
    p.
      This is a long paragraph of plain text.
      It spans multiple lines without indentation.

    // Interpolation
    - let name = "GFG"
    p Hello #{name}, welcome to our website.

    // Script Tags
    script.
      var data = {
        "key": "value",
        "number": 42
      };

    // Tag Attribute Value
    a(href="#") Click here for more information

Output: