Filters in Pug View Engine
Last Updated :
28 Apr, 2025
Pug is a template engine that can be used to create HTML documents. It's used to write templates that are then compiled into functions that take in data and render HTML documents.
We will discuss the different types of Filters in Pug Template and their Approaches:
What do you mean by filters in a pug template?
Filters in Pug are a powerful feature that allows you to use other languages in your templates. This can be useful for a variety of tasks, such as preprocessing data, generating dynamic content, or using a different templating language altogether.
1. :markdown: This filter converts Markdown to HTML.
:markdown
# Heading
*italic* and **bold** text.
2. :javascript: This filter converts JavaScript to HTML.
:javascript
console.log("Hello, world!");
3. :css: This filter converts CSS to HTML.
:css
body {
background-color: lightblue;
}
4. :coffee: This filter converts CoffeeScript to JavaScript.
:coffee
square = (x) -> x * x
console.log square(5)
5. :sass: This filter converts Sass to CSS.
:sass
$primary-color: blue;
body {
color: $primary-color;
}
6. :less: This filter converts Less to CSS.
:less
@primary-color: blue;
body {
color: @primary-color;
}
Approach to using Filters in Pug templates:
There are several approaches to using filters in Pug templates. These include:
- Inline Filters: Using the colon syntax directly within the template.
- Block Filters: Using block-level syntax with indentation.
- Extending Filters: Creating custom filters by extending Pug's functionality.
Inline Filters:
Inline filters are used directly within the Pug template, prefixed with a colon followed by the filter name.
Syntax:
:filterName
Content to be processed by the filter.
Block Filters:
Block filters are applied to indented blocks of content within the template.
Syntax:
filterName
| Content to be processed by the filter.
Extending Filters:
Syntax:
//- Define custom filter
pug.filters['customFilter'] = function (text, options) {
// Process text and return the result
};
//- Use custom filter in the template
:customFilter
Content to be processed by the custom filter.
Steps to Node App & Install Required Modules
Step 1: Create a backend server using the following command in your project folder.
npm init -y
Step 2: Install the necessary package in your server using the following command.
npm i express ejs
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"express": "^4.18.2",
"ejs": "^3.1.9",
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>Welcome to our Pug-powered website!</p>
</body>
</html>
// app.js
// Require necessary modules
const express = require('express');
const path = require('path');
// Create an Express app
const app = express();
// Set Pug as the view engine
app.set('view engine', 'pug');
// Set the views directory
app.set('views', path.join(__dirname, 'views'));
// Define a route to render a Pug template
app.get('/', (req, res) => {
res.render('index', { title: 'Pug Template Example', message: 'Welcome to our Pug-powered website!' });
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
To run the pug application, we need to start the server by using the below command.
node app.js
Example 2: Here's an example combining multiple filter usages in a single Pug template along with their outputs:
JavaScript
//- Example of combining usage of filters in a Pug template
//- Markdown Filter
:markdown
# Heading
*Italic* and **bold** text.
//- JavaScript Filter
:javascript
console.log("Hello, world!");
//- CSS Filter
:css
body {
background-color: lightblue;
color: white;
}
//- CoffeeScript Filter
:coffee
square = (x) -> x * x
console.log(square(5))
//- Sass Filter
:sass
$primary-color: blue;
body {
color: $primary-color;
}
//- Less Filter
:less
@primary-color: blue;
body {
color: @primary-color;
}
Output:
The output of each section in the Pug template:
1. Markdown Filter:
<h1>Heading</h1>
<p><em>Italic</em> and <strong>bold</strong> text.</p>
2. JavaScript Filter:
Hello, world!
3. CSS Filter:'
<style>
body {
background-color: lightblue;
color: white;
}
</style>
4. CoffeeScript Filter:
25
5. Sass Filter:
<style>
body {
color: blue;
}
</style>
6. Less Filter:
<style>
body {
color: blue;
}
</style>
Output:
-(1)-300.png)
Conclusion:
Pug templates offer a versatile approach to building dynamic web applications, and filters play a crucial role in enhancing their functionality. By providing a seamless integration of various languages and preprocessors, filters empower developers to streamline their workflow and efficiently manage content within templates.
Similar Reads
Pug View Engine - Iteration 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, and mixins using which we can render HTML code based on user input or ref
4 min read
Headings in Pug View Engine 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
2 min read
Pug View Engine Installation Pug, once known as Jade, makes writing HTML codes eÂasy for NodeJS and web browsers. It's cleÂar syntax and handy features speeÂd up web work and keep things simpleÂ. This quick guide will go over what you neeÂd to use Pug, how to install it, and what it does, and will give you cleÂar steps along wi
2 min read
Pug View Engine Introduction Pug is a template engine that works with JavaScript libraries and frameworks. It simplifies the process of writing HTML by reducing traditional HTML syntax. It uses indentation to represent HTML structure. By using Pug you can reuse the HTML code. In this article, we will learn about how to use pug
5 min read
Tags in Pug View Engine Tags play a crucial role in Pug templates, allowing developers to create structured and dynamic HTML content. Let's explore the concept of tags in Pug in detail. Table of Content What are Tags in Pug?Tag AttributesClass and ID AttributesSelf-Closing TagsBlock ExpansionDynamic Tag NamesSteps to Setup
4 min read