Pug Markdown

Posted on  by admin

Sometimes you like the simplicity of markdown to just express whatever you want to say, but want to keep control on how it will look like. This is what it is about, get control over the output while adding simple ways to take advantage of the PugJS functionalities like mixins and layout. In the Pug Language reference there is an easy example on how to use the markdown filter on a. Pug and Markdown Template. Sugarfi (624) This is a simple template for using the Pug HTML preprocessor with Express to render Markdown files. Simple follow the comments, and you can make your own website with Markdown! Wilke000 (606) sugarfi (624) legal. Terms and services.


Pug is an elegant templating language, it has roots from Emmet and Haml and is meant forquick, clean HTML coding. Pug is not the most performantout there but for static websites, as is our purpose here it is good enough.

Personally, Pug allows me to write HTML very quickly especially combined with the powers ofmixins, a good structure and includes.

Here is a sample hello world page in Pug:

In pug, comments start with a // or //- for unbuffered code.And javascript starts with a -, you can execute javascript in these blocks.

Tags and Content

The first word in a line is your HTML tag. Anything that starts with a periodis a class. Anything that starts with a hash symbol # is an id.

Pug knows when tags are self-closing, like in the next example with img.If no tag is specified, it just uses divs.

To add text, type it after the element seperated by a space.You can also use pipes to add a newline for larger blocks of textor whenever you want to seperate two elements with a space or text content.

To add an element on the same line without intending, add a semi-colon : beforethe new element.


You can interpolate content, escaped, unescaped.

myself follows the basic pattern for evaluating a template local, but the code in between #{ and } is evaluated, escaped, and the result buffered into the output of the template being rendered.

This can be any valid Javascript expression, so you can do whatever feels good.

You can embed HTML through interpolation as well, but you have to make sure it is safe.In the context of static content, this usually will be.


Elements can have attributes, these are added in parentheses and seperated by commas.

If you don't put the value of the attribute in a string, then it tries to evaluate ajavascript expression.

The class attribute can be a string or an object mapping the value to a boolean.


As expected in a rendering engine there are control structures that you can use.


In the pinnacle of DRY. You can use Mixins which are resuable blocks that you can callrepeatedly again and again. They can accept arguments of any type like functions.


Pug markdown meaning

Pug supports template inheritance via the block and extends keywords. A block is simply a 'block' of Pug that may be replaced within a child template, this process is recursive.

You can also append content instead of overwriting it. Do this with block append or append for short or prepend for the opposite.


It is possible to include other pug files. Even a file with only mixins or blocks that won't immediately render.


This is useful to use for a footer, header, sidebar setup for example.


Show TopicsGetting StartedPreview ServerOutput OptionsCustom Tools
HTML Tools

Pug Markdown Meaning

Pug (Jade)HamlMarkdownSlimSassLessStylus
JS Tools
BabelBundle JavaScriptCoffeeScript

Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML.

Pug Markdown Online


Pug Markdown Youtube

Pug markdown 2019
  • Output File

    Click the output file path to manually change it or use project wide output options to adjust output path for all Markdown files.

  • Github Flavored

    This option enables the Github Flavored version of markdown.

  • Minify HTML

    Enable this option to minify the output HTML file.

  • Wrap with HTML

    Enable this option to wrap the markdown output inside a basic html page.

Node Pug Markdown

Learn more about Markdown from Markdown website.