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
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
} is evaluated, escaped, and the result buffered into the output of the template being rendered.
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.
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 supports template inheritance via the
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.
ResourcesShow TopicsGetting StartedPreview ServerOutput OptionsCustom Tools
Pug Markdown MeaningPug (Jade)HamlMarkdownSlimSassLessStylus
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
Click the output file path to manually change it or use project wide output options to adjust output path for all Markdown files.
This option enables the Github Flavored version of markdown.
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.