What is Pug?

Lately, I started using "Pug" HTML preprocessor. It allows to write a concise HTML. At first, I thought why the hell I would use this when there is Emmet. But I was wrong. As soon as I started using it, it brings the joy of writing HTML.

How to use

h1 Your title goes here

Typically, you want something like this

section.container
  .header
    h1 My name is Kyung Mo #[span.lastname Kweon]
    p If #[em interested], please checkout the following

will result in

<section class="container">
  <div class="header">
    <h1>My name is Kyung Mo <span class="lastname">Kweon</span></h1>
    <p>If <em>interested</em>, please checkout the following</p>
  </div>
</section>

Anchor tag or any tag that has many attributes can be written like a JS function.

a(href="https://github.com/kkweon" target="_blank") GitHub

Dealing with Whitespace

One caveat is that if you don't want to use the inline tag as above, you have to use many ugly pipes(|) like below because whitespace is not automatically generated.

section.container
  .header
    h1 My name is Kyung Mo
       |
       |
       span.lastname Kweon
    p If
      |
      |
      em interested
      | , please checkout the following

Final Result

See the Pen portfolio by Mo Kweon (@kkweon) on CodePen.