Getting started with pug

Pug.js tutorial : Pug - interpolation

Pug tutorial series pugjs tutorial introduction



Overview

In this part of the pugjs tutorial series we will learn about interpolation in pugjs. Interpolation is a process of insertion of something of different nature into something else. We have 2 types of interpolation in pugjs :

  1. String Interpolation : This is further divided into 2 parts -
    1. Escaped String Interpolation.
    2. Unescaped String Interpolation.
  2. Tag Interpolation : Pug also supports tag interpolation.

String Interpolations

There are 2 types of string interpolation available in pug which are explained below :

  1. Escaped String Interpolation :
    													
    //Name of the file : escaped-string-interpolation.pug
    
    - var main = "Nodejsera's Pug Tutorial";
    - var writer = "Team Nodejsera";
    - var copy = "<h3>Copyrighted!</h3>";
    
    h1= main
    p Authored By :  #{writer}
    p And All this content is: #{copy}
    													
    												

    You can run the above code using the following command :
    													
    >pug escaped-string-interpolation.pug
    
      rendered escaped-string-interpolation.html
    													
    												

    Now open the escaped-string-interpolation.html file and observe the interpolated content from pug to html.
    													
    <h1>Nodejsera's Pug Tutorial</h1>
    <p>Authored By :  Team Nodejsera</p>
    <p>And All this content is: lt; h3 gt;Copyrighted! lt; /h3 gt;</p>
    													
    												

  2. Unescaped String Interpolation :
    													
    //Name of the file : unescaped-string-interpolation.pug
    
    - var content = "<b>Nodejsera</b>"
    p This is a !{content}
    													
    												

    You can run the above code using the following command :
    													
    >pug unescaped-string-interpolation.pug
    
      rendered unescaped-string-interpolation.html
    													
    												

    Now open the unescaped-string-interpolation.html file and observe the interpolated content from pug to html.
    													
    <p>This is a <b>Nodejsera</b></p>
    													
    												

Tag Interpolation

Pug also supports tag interpolations. We just need to Wrap an inline Pug tag declaration in #[ and ], and it'll be evaluated and buffered into the content of its containing tag as shown in examples below:

  1. Example 1 :
    													
    //Name of the file : tag-interpolation-1.pug
    p.
      We are testing here tag interpolation in pug.js
      where  #[b all the content will be bold] and
      #[u this text will be underlined].
     
    													
    												

    You can run the above code using the following command :
    													
    >pug tag-interpolation-1.pug
    
      rendered tag-interpolation-1.html
    													
    												

    Now open the tag-interpolation-1.html file and observe the interpolated content from pug to html.
    													
    <p>We are testing here tag interpolation in pug.js
    where  <b>all the content will be bold</b> and
    <u>this text will be underlined</u>.</p>
    													
    												

  2. Example 2 :
    													
    //Name of the file : tag-interpolation-2.pug
    span
      | this is not written with tag interpolation so we can observe
      b some unexpected
      | results
      strong after
      | after using this method.
    p.
      however on the other hand, whitespace is #[b very well considered] and #[strong in tag interpolation] as we can observe
     
    													
    												

    You can run the above code using the following command :
    													
    >pug tag-interpolation-2.pug
    
      rendered tag-interpolation-2.html
    													
    												

    Now open the tag-interpolation-1.html file and observe the interpolated content from pug to html.
    													
    <span>this is not written with tag interpolation so we can observe<b>some unexpected</b>results<strong>after</strong>after using this method.
    </span><p>however on the other hand, whitespace is <b>very well considered</b> and <strong>in tag interpolation</strong> as we can observe</p>
    													
    												

What we learned

In this article, we learned about interpolation in pug.js and all its available types like string interpolation and tag interpolation.

Repository

Get it from :