Pug: // Incorrect syntax for multi-line content In this example, Pug renders the p element as intended, but also renders the word 'This' in the subline as an element of type This. If you don't use this syntax for multi-line content, Pug will interpret the lines underneath the element as separate elements.

Pug: // Correct syntax for multi-line content To add multiple lines of content inside an element, put a period after the element's name and drop the content below, indenting each line. To put content inside an element, put a space after its tag name (on the same line) and add the content there. In this example, the head element is on an indented line underneath the html element, which renders it as a child of the html element. To create a child element, indent the line under the intended parent and create the child there. This is because Pug uses formatting elements (such as white space and indentation) to determine parent/child relationships between elements. Pug will automatically generate a closing tag for elements that require one, so you only have to write the opening tag. Note: Even if the file format you're rendering to doesn't necessarily require you to explicitly state the doctype, declare it so Pug knows what file type you want.Pug syntax uses non-bracketed element tags that are similar to their HTML counterparts. An IDE with an integrated terminal, like Visual Studio Code.

Node.js installed on your computer (so you can use NPM).

Pug can also be used to render a few other types of files (e.g., XML), but this tutorial will focus on HTML.īy the way, to reinforce your learning here (or if video is just more your style), I'd suggest checking out Pug Template Engine - Full Tutorial for Beginners by dcode on the FreeCodeCamp YouTube channel. If the idea of a template engine sounds intimidating (or you've tried to use one before and found yourself frustrated), there's no need to worry- As long as you have a solid understanding of HTML, you'll be able to pick-up on the basics of Pug pretty quickly. Pug (formerly known as Jade) is a template engine that allows you to dynamically manipulate the HTML and CSS that are ultimately rendered from the files that were written in it.

Pug template + assign attribute value