Pug language preview

1. HTML template

tags, id/class shorthand, and attributes

horizon-dark

doctype html
html(lang="en")
  head
    title My Page
  body
    h1#headline.title Welcome
    nav.menu
      a(href="/") Home
      a(href="/about") About

atom-one-dark

doctype html
html(lang="en")
  head
    title My Page
  body
    h1#headline.title Welcome
    nav.menu
      a(href="/") Home
      a(href="/about") About

github-dark

doctype html
html(lang="en")
  head
    title My Page
  body
    h1#headline.title Welcome
    nav.menu
      a(href="/") Home
      a(href="/about") About

dracula

doctype html
html(lang="en")
  head
    title My Page
  body
    h1#headline.title Welcome
    nav.menu
      a(href="/") Home
      a(href="/about") About

nord

doctype html
html(lang="en")
  head
    title My Page
  body
    h1#headline.title Welcome
    nav.menu
      a(href="/") Home
      a(href="/about") About

github

doctype html
html(lang="en")
  head
    title My Page
  body
    h1#headline.title Welcome
    nav.menu
      a(href="/") Home
      a(href="/about") About

2. Mixins and interpolation

mixin calls and #{} interpolation

horizon-dark

mixin card(title)
  .card
    h2.card-title= title
    block

+card("Hello")
  p Posted by #{author} on #{date}

atom-one-dark

mixin card(title)
  .card
    h2.card-title= title
    block

+card("Hello")
  p Posted by #{author} on #{date}

github-dark

mixin card(title)
  .card
    h2.card-title= title
    block

+card("Hello")
  p Posted by #{author} on #{date}

dracula

mixin card(title)
  .card
    h2.card-title= title
    block

+card("Hello")
  p Posted by #{author} on #{date}

nord

mixin card(title)
  .card
    h2.card-title= title
    block

+card("Hello")
  p Posted by #{author} on #{date}

github

mixin card(title)
  .card
    h2.card-title= title
    block

+card("Hello")
  p Posted by #{author} on #{date}

3. Control flow

if/else, each, and case/when as keywords

horizon-dark

each item in items
  if item.inStock
    p= item.name
  else
    p Out of stock

case item.status
  when "active"
    p Active
  default
    p Unknown

atom-one-dark

each item in items
  if item.inStock
    p= item.name
  else
    p Out of stock

case item.status
  when "active"
    p Active
  default
    p Unknown

github-dark

each item in items
  if item.inStock
    p= item.name
  else
    p Out of stock

case item.status
  when "active"
    p Active
  default
    p Unknown

dracula

each item in items
  if item.inStock
    p= item.name
  else
    p Out of stock

case item.status
  when "active"
    p Active
  default
    p Unknown

nord

each item in items
  if item.inStock
    p= item.name
  else
    p Out of stock

case item.status
  when "active"
    p Active
  default
    p Unknown

github

each item in items
  if item.inStock
    p= item.name
  else
    p Out of stock

case item.status
  when "active"
    p Active
  default
    p Unknown

4. Comments and inline code

// buffered comments, and -/=/!= code lines

horizon-dark

// This renders as an HTML comment
- var year = 2024
p= 'Copyright ' + year
!= renderTrustedHtml()

atom-one-dark

// This renders as an HTML comment
- var year = 2024
p= 'Copyright ' + year
!= renderTrustedHtml()

github-dark

// This renders as an HTML comment
- var year = 2024
p= 'Copyright ' + year
!= renderTrustedHtml()

dracula

// This renders as an HTML comment
- var year = 2024
p= 'Copyright ' + year
!= renderTrustedHtml()

nord

// This renders as an HTML comment
- var year = 2024
p= 'Copyright ' + year
!= renderTrustedHtml()

github

// This renders as an HTML comment
- var year = 2024
p= 'Copyright ' + year
!= renderTrustedHtml()