To the point

Is there a way I can get Pug to include embedded HTML in a Markdown file as part of the actual HTML and not simply plain text?

Details

I have a Pug template that uses the jstransformer-markdown-it filter. The input Markdown file has embedded HTML. That Markdown file looks like this (video.md)

# Watch this video!

This video demonstrates *the power of something something*.

<iframe width="560" height="315" src="/..." frameborder="0" allowfullscreen></iframe>

More Markdown here.
----------------

The template to load this Markdown file looks like this (entry.pug)

html
  include head.pug

  body
    header Article

    div(id="main")
      article
        include:markdown-it video.md

This is then served up via Express like so (index.js).

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('entry');
}

app.listen(3000);

When loading this content in the browser, most of the Markdown from the file is converted to HTML successfully. However the embedded markup (the iframe in this case) is inserted as plain text.

Is there a way I can get Pug to include embedded HTML in a Markdown file as part of the actual HTML and not as just text?

To the point

Is there a way I can get Pug to include embedded HTML in a Markdown file as part of the actual HTML and not simply plain text?

Details

I have a Pug template that uses the jstransformer-markdown-it filter. The input Markdown file has embedded HTML. That Markdown file looks like this (video.md)

# Watch this video!

This video demonstrates *the power of something something*.

<iframe width="560" height="315" src="https://www.youtube./..." frameborder="0" allowfullscreen></iframe>

More Markdown here.
----------------

The template to load this Markdown file looks like this (entry.pug)

html
  include head.pug

  body
    header Article

    div(id="main")
      article
        include:markdown-it video.md

This is then served up via Express like so (index.js).

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('entry');
}

app.listen(3000);

When loading this content in the browser, most of the Markdown from the file is converted to HTML successfully. However the embedded markup (the iframe in this case) is inserted as plain text.

Is there a way I can get Pug to include embedded HTML in a Markdown file as part of the actual HTML and not as just text?

• javascript
• markdown
• pug
• jstransform

1 Answer 1

There's a way, but it's undocumented! https://github./pugjs/pug/issues/2200

Change include:markdown-it(html)

You can also install markdown-it plugins, and include them with e.g. include:markdown-it(plugins=['markdown-it-decorate'])

I haven't found a way to turn on plugins by default, so you need to put them in every pug include.