pug.js tutorial | Chapter 8 | Comments in Pug

In this part of the pug tutorial series we will learn about all the different type of comments available in pug.

Comments are any text/code/script which is added by programmer with the purpose of making the source code more human understandable. The compilers and interpreters generally ignore these comments. Comments helps make code easier to understand by explaining what is happening in the code and comments can also be used to prevent some certain portions of the code from executing.
There are 4 different forms of comments available in pug :

Buffered comments
Unbuffered comments
Block comments
Conditional comments

They are explained in detail below.

Buffered comments are similar to single line javascript comments. They act just like any other tag producing html comments after rendering. An example is given below :

											
//Name of the file : buffered.pug
// This is comment 1
h2 Nodejsera
//This is comment 2
h3 An example of buffered comments

You can run the above code using the following command :

											
>pug buffered.pug

  rendered buffered.html

Now open the buffered.html file and observe comment 1 and comment 2 both transformed from pug to html.

											
<!--Name of the file : buffered.html -->
<!-- This is comment 1-->
<h2>Nodejsera</h2>
<!--This is comment 2-->
<h3>An example of buffered comments</h3>

By simple adding an hyphen (-) in front of a buffered comment we can convert it to unbuffered comments which are only for pug and will not be present in the rendered html as shown in the example below :

											
//Name of the file : unbuffered.pug
// This is comment 1
h2 Nodejsera
//-This is comment 2
h3 An example of unbuffered comments

You can run the above code using the following command :

											
>pug unbuffered.pug

  rendered unbuffered.html

Now open the unbuffered.html file and observe onlycomment 1 has been transformed from pug to html.

											
<!--Name of the file : unbuffered.html -->
<!-- This is comment 1-->
<h2>Nodejsera</h2>
<h3>An example of unbuffered comments</h3>

Pug also supports block comments. We just need to keep track of the indentation in the buffered comments and they will start acting as block comments. An example is given below :

											
//Name of the file : block-comments.pug
// This is comment 1
   this is comment 1.1
   this is comment 1.2
   and so on 
h2 Nodejsera
//-This is comment 2
   this is comment 2.1
h3 An example of block comments

You can run the above code using the following command :

											
>pug block-comments.pug

  rendered block-comments.html

Now open the block-comments.html file and observe how comment 1 has been transformed to block comment from buffered comment :

											
<!--Name of the file : block-comments.html -->
<!-- This is comment 1this is comment 1.1
this is comment 1.2
and so on -->
<h2>Nodejsera</h2>
<h3>An example of block comments</h3>

Pug does not have any special syntax available for conditional comments however normal HTML style conditional comments works just fine.

In this article we learned about

Overview
What are comments
Buffered comments
Unbuffered comments
Block comments
Conditional comments

Get it from :

Pug.js tutorial : Comments in pug

Inside this article!