Pug.js is a template engine for Node.js 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, and mixins 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. This approach allows us to reuse static web pages which have dynamic data. Angular brackets are not used while specifying the tags.
Headings in Pug
The HTML heading tag is used to define the headings of a page. There are six levels of headings defined by HTML. These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 being the least.
Syntax of Heading in Pug:
h1 Heading
h2 Subheading
Features of Headings in Pug View Engine
- h1 is used for the main heading. (Biggest)
- h2 is used for subheadings, if there are further sections under the subheadings then the h3 elements are used.
- h6 for the small heading (smallest one).
Steps to Create Headings in Pug View Engine:
Step 1: Create a Nodejs Application using the following command:
npm init -y
Step 2: Install required Dependencies:
npm i pug express
The updated Dependencies in package.json file will look like:
"dependencies": {
"express": "^4.18.2",
"pug": "^3.0.2"
}
Folder Structure:
Example: Create the required files as seen in folder structure and add the following codes.
//heading.pug doctype html html head
title GeeksforGeeks Pug
style.
h1 {
color: green;
}
body
h1 Welcome to GeeksforGeeks
h2 Welcome to GeeksforGeeks
h3 Welcome to GeeksforGeeks
h4 Welcome to GeeksforGeeks
h5 Welcome to GeeksforGeeks
H6 Welcome to GeeksforGeeks
|
//app.js const express = require( 'express' );
const app = express(); const port = 3000; app.set( 'view engine' , 'pug' );
app.get( '/' , (req, res) => {
res.render( 'heading' );
}); app.listen(port, () => { console.log(`server is running at http: //localhost:${port}`);
}); |
Output: