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
There are 4 different forms of comments available in pug :
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
>pug buffered.pug rendered buffered.html
buffered.htmlfile and observe
comment 2both 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
>pug unbuffered.pug rendered unbuffered.html
unbuffered.htmlfile and observe only
comment 1has 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
>pug block-comments.pug rendered block-comments.html
block-comments.htmlfile and observe how
comment 1has 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