DEV Community

Pug in 5 minutes

Jhey Tompkins on May 13, 2020

What is it? A template engine for node and browser environments. It uses an indent sensitive syntax allowing you to write clean markup ...

Read full post

Marcus • May 13 '20 • Edited

I love pug (since jade days) and especially the markdown filter is neat for simple content that might need some more complex html.

pugjs.org/language/filters.html

:markdown-it(linkify langPrefix='highlight-')
  # Markdown

  Markdown document with http://links.com and

  ` ` ` js
  var codeBlocks;
  ` ` `
script
  :coffee-script
    console.log 'This is coffee script'

someone wrote an article about it here: dev.to/patarapolw/pug-with-markdow...

PS: I'm using the php pug port :D which is a bit weird, but works well.

Jhey Tompkins • May 13 '20

Yeah, me too! 😅

I've never really used filtering though. I'll definitely give it a look 👍

I was unaware of some of the ports and packages that have come out. Yet to try out the React integration 😎

Elliot Derhay • May 13 '20

Is the port weird or is using it in PHP weird?

Marcus • May 13 '20

It was weird that the php port comes with the full node package - in case node is available (if I remember right) and it's weird because the handling of variables was not 100% consistent. Sometimes you had to write $var['key'] - but maybe these problems are solved now, haven't installed it for quite some time.

But else, it rocks.

Elliot Derhay • May 13 '20 • Edited

Oh so it still requires Node to run and provides a $var array for variables? That is weird. 😕

Marcus • May 14 '20

No no, it doesn't require Node at all! The information I gave was probably old or misleading.
I know their goal was to make it 100% compatible with the Node version, so I'm sure everything in the Node version, works in the php version.
github.com/pug-php/pug

Jukka-Pekka Keisala • May 13 '20

I have done one project with Pug but I went back to HTML because it did not improve my productivity at all. I don't buy saving keystrokes since IDE's have code completion on HTML. Instead with pug I get constant indentation problems and it was harder to read that colour coded HTML in the IDE.
Pug just did not sit on my tooling at all.

Jhey Tompkins • May 13 '20

Totally get that it's not for everyone 👍

For me, I've not had a great experience of relying on IDEs for things like that 😅 However, I imagine if I was to give emmet a serious try, that could work out.

I try to split things up atomically where possible and use a rainbow indentation extension 😅
For me, it saves me a bunch when I'm working on demos etc. It's rare I use it for work though.

Pacharapol Withayasakpunt • May 13 '20

It is only partially about indentation, but also about closing tags.

Does any human (not html linter) needs named closing tags. Why not just closing brackets, or nothing (using indentation instead)? Like, I love build.gradle more than pom.xml.

Jhey Tompkins • May 13 '20

Yeah 💯

It's an interesting topic. Reminds me of this article about optional HTML and what the browser will put in for you if omit closing tags.

Funny how the thought of .xml to me seems more awkward than .html although they are similar syntax 😅 It's likely the thought of huge configuration exports from programs, etc.

Surjith S M • Jul 25 '20

How do I convert this to pug?

  <div class="words">
      <span style="animation-delay:1ms">Lorem</span>
      <span style="animation-delay:1.8s">Ipsum</span>
      <span style="animation-delay:3.6s">Sit</span>
      <span style="animation-delay:5.4s">Amet</span>
      <span style="animation-delay:7.2s">Text</span>
      <span style="animation-delay:9s">Random</span> 
    </div>

Ionut Staicu • May 13 '20

Who wants an unpopular opinion? Nobody? Ok, here it is: template engines similar to jade, pug, haml & co sucks and should be avoided like plague.

Adds unwanted complexity to a fairly simple concept (basically if you're familiar with XML, you can dig HTML too), make things harder to debug, impose some limits and rises the entry point for beginners.

Jhey Tompkins • May 13 '20 • Edited

It's fine. It's your opinion 👍🙂

Sm0ke • May 13 '20

Nice, thanks for writing. PUG is such a great engine.
Super flexible and minimalistic.

Jhey Tompkins • May 13 '20

No problem! 😎
Yeah, I'm a big fan of it for my demo work. Think it's a great fit. Especially when wanting to generate random markup.

Jhey Tompkins • May 13 '20

It's definitely a personal preference 👍 It's not for everyone.

I've rarely worked in teams using "indent-based" syntax. But, I find it great for working on my own demos, etc. In these scenarios, it's only me working on the code 😎

Adnan Babakan (he/him) • May 13 '20

Thanks for this great post
Although PUG seems pretty cool in practice but I think it is not that much effective and efficient in production and real world.

Jhey Tompkins • May 13 '20 • Edited

No problem! 😎
Thanks for your reply. Yeah, it's cool. There's even a React integration now.

By "production and real-world", do you mean "work, commercial, etc."? I completely get this.
I'll admit, I've rarely used it for work. For one, it would require everyone in a team to be using it. I guess it was a similar thing with CoffeeScript. Potentially more risk of error and not everyone likes using indent based syntax.

That said I find using it very effective and efficient for all of my side projects, demos, etc. 👍 Pretty much the majority of my work on CodePen uses .pug.

Shinigami • May 13 '20

And if you need pug to be formatted... just use my prettier plugin <3

github.com/prettier/plugin-pug