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:
Table of Content
- Using `.` Followed by Text Content
- Using interpolation with `#{}` Syntax
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: