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 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
>pug buffered.pug
rendered buffered.html
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
>pug unbuffered.pug
rendered unbuffered.html
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
>pug block-comments.pug
rendered block-comments.html
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