How to use markdown markup in PUG

Two lines of code and you’re done! When you use pug as a template engine or preprocessor, there comes a time when you need to post an article, or maybe more than one. In the formatting of the article, the PUG itself is of course minimal, but you still want something even simpler and more convenient for formatting text. And what could be better than the good old markdown!)

1. We include markdown files in pug

It is very easy to connect, or rather to include .md files in pug. Just like regular .pug or .html. Only when connecting is it worth specifying a special filter so that pug transforms the markdown markup into familiar HTML.

We connect via include with the filter:

include:markdown-it article.md

Sample page:

//- index.pug
doctype html
html
  head
    title An Article
  body
    include:markdown-it article.md

Documentation times

2. Installing md filter for pug

By itself, pug cannot handle markdown markup, so you need to install an additional filter. This is also easy to do. Plus one addiction to your project.

Install the markdown filter for pug in the project:

npm install --save jstransformer-markdown-it

Documentation two

Done!) Congratulations, now you can write articles in MD and add them to your project.

This is how it looks in my project.