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.

Filters in Pug View Engine

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:

Table of Content

  • 1. :markdown:
  • 2. :javascript:
  • 3. :css:
  • 4. :coffee:
  • 5. :sass:
  • 6. :less:
  • Inline Filters:
  • Block Filters:
  • Extending Filters:

Similar Reads

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:

Inline filters are used directly within the Pug template, prefixed with a colon followed by the filter name....

Block Filters:

Block filters are applied to indented blocks of content within the template....

Extending Filters:

Syntax:...

Steps to Node App & Install Required Modules

Step 1: Create a backend server using the following command in your project folder....

Project Structure:

...

Conclusion:

...