Get the code: index.pug
Pug is a language that compiles to HTML. It has a cleaner syntax with additional features like if statements and loops. It can also be used as a server-side templating language for server languages like Node.js.
//- Single Line Comment
//- Multi Line
Comment
//- ---TAGS---
//- Basic
div
//- <div></div>
h1
//- <h1></h1>
my-customTag
//- <my-customTag></my-customTag>
//- Sibling
div
div
//- <div></div>
<div></div>
//- Child
div
div
//- <div>
<div></div>
</div>
//- Text
h1 Hello there
//- <h1>Hello there</h1>
//- Multi Line Text
div.
Hello
There
//- <div>
Hello
There
</div>
//- ---ATTRIBUTES---
div(class="my-class" id="my-id" my-custom-attrs="data" enabled)
//- <div class="my-class" id="my-id" my-custom-attrs="data" enabled></div>
//- Short Hand
span.my-class
//- <span class="my-class"></span>
.my-class
//- <div class="my-class"></div>
div#my-id
//- <div id="my-id"></div>
div#my-id.my-class
//- <div class="my-class" id="my-id"></div>
//- ---JS---
- const lang = "pug";
//- Multi Line JS
-
const lang = "pug";
const awesome = true;
//- JS Classes
- const myClass = ['class1', 'class2', 'class3']
div(class=myClass)
//- <div class="class1 class2 class3"></div>
//- JS Styles
- const myStyles = {'color':'white', 'background-color':'blue'}
div(style=myStyles)
//- <div style="color:white;background-color:blue;"></div>
//- JS Attributes
- const myAttributes = {"src": "photo.png", "alt": "My Photo"}
img&attributes(myAttributes)
//- <img src="photo.png" alt="My Photo">
- let disabled = false
input(type="text" disabled=disabled)
//- <input type="text">
- disabled = true
input(type="text" disabled=disabled)
//- <input type="text" disabled>
//- JS Templating
- const name = "Bob";
h1 Hi #{name}
h1= name
//- <h1>Hi Bob</h1>
//- <h1>Bob</h1>
//- ---LOOPS---
//- 'each' and 'for' do the same thing we will use 'each' only.
each value, i in [1,2,3]
p=value
//-
<p>1</p>
<p>2</p>
<p>3</p>
each value, index in [1,2,3]
p=value + '-' + index
//-
<p>1-0</p>
<p>2-1</p>
<p>3-2</p>
each value in []
p=value
//-
each value in []
p=value
else
p No Values are here
//- <p>No Values are here</p>
//- ---CONDITIONALS---
- const number = 5
if number < 5
p number is less then 5
else if number > 5
p number is greater then 5
else
p number is 5
//- <p>number is 5</p>
- const orderStatus = "Pending";
case orderStatus
when "Pending"
p.warn Your order is pending
when "Completed"
p.success Order is Completed.
when -1
p.error Error Occurred
default
p No Order Record Found
//- <p class="warn">Your order is pending</p>
//- --INCLUDE--
//- File path -> "includes/nav.pug"
h1 Company Name
nav
a(href="index.html") Home
a(href="about.html") About Us
//- File path -> "index.pug"
html
body
include includes/nav.pug
//-
<html>
<body>
<h1>Company Name</h1>
<nav><a href="index.html">Home</a><a href="about.html">About Us</a></nav>
</body>
</html>
//- Importing JS and CSS
script
include scripts/index.js
style
include styles/theme.css
//- ---MIXIN---
mixin basic
div Hello
+basic
//- <div>Hello</div>
mixin comment(name, comment)
div
span.comment-name= name
div.comment-text= comment
+comment("Bob", "This is Awesome")
//-
<div>
<span class="comment-name">Bob</span>
<div class="comment-text">This is Awesome</div>
</div>
Got a suggestion? A correction, perhaps? Open an Issue on the GitHub Repo, or make a pull request yourself!
Originally contributed by Michael Warner, and updated by 5 contributors.