Arbitrary HTML/JavaScript inside a slide - useful for live demos

[denilsonsa]

Would it be possible to include arbitrary HTML and/or JavaScript inside a slide?

Let's say I'm making a presentation about some web technology. It would be cool to embed arbitrary HTML in the middle of the slide, so I can interact with the thing as a live demo.

Sure, that makes it impossible to export as anything other than HTML. But having a smooth live demo during a presentation is worth it.

I also understand this can come with security concerns, specifically when opening marp slides from other people. But right now I'm opening this as a discussion, and trying to understand what's currently possible.

---

What I've tried already:

• @marp-team/marp-cli v4.1.2 (w/ @marp-team/marp-core v4.0.1)
• Embedding arbitrary CSS:
  • Arbitrary styles inside <style> tag work fine.
  • Arbitrary styles inside style="…" attribute do not work, they get stripped away.
• Embedding form fields:
  • <input …>, <textarea>, <button> don't work, it gets rendered verbatim as plain text. (It apparently works on https://demo.marpeditor.com/, but I understand this is an unofficial editor.)

Untested:

• Adding arbitrary scripts.
• Adding arbitrary SVG.
• Adding <canvas>.
• Adding <iframe>.
  • If this is supported (I haven't tested it), this could work around the limitation of arbitrary HTML/JavaScript inside the slides. But this also means each little variation of the demo requires a full separate HTML file, which means a lot of boilerplate code and a lot of similar files.

Since the demo I was trying to create was pure CSS, I could implement it using <table>, <div> and <a> tags, which are all well supported inside marp. Thus, I'm not in a hurry for any solution right now. I'm mostly exploring what's possible.

[yhatt]

Of course it's already available. Use the --html option to allow any HTML tag in Marp CLI.
https://github.com/marp-team/marp-cli#:~:text=Marpit%20based%20engine-,html,-boolean%20%7C%20object

• Related
  • Insert html #349
  • Is there a way to include inline js? #483

[denilsonsa]

Thank you!

I searched the online docs… I tried finding some directives, but there were none. I saw some advanced usage documentation for developers using the marpit library, something that seemed like it could do what I wanted, but that required writing my own code using that library.

It seems I was looking at the wrong place.

Both the CLI README and the built-in help say:

--html
Enable or disable HTML tags (Configuration file can pass the whitelist object if you are using Marp Core)

Which is confusing, because <div>, <a>, <span>, <table>, <style> and other tags were already enabled. Thus, I thought --html wouldn't do anything, given that HTML tags were already enabled.

Should we change that text to say arbitrary HTML tags?