Dynamic content on slides with JS

[j2deme]

Hi! I usually export my slides to PDF, making them static, but I've been thinking recently about using the HTML export to take advantage of the interaction with the content (like form components).

An idea came to my mind, and I wonder if Marp supports adding JS to, let's say... take data from an API and populate a dynamic table OR make a chart using Chart JS OR using a canvas and D3 JS to create some fancy graph... all inside the HTML slide.

Something like MDX on Astro, don't take me wrong, I've used Marp and Markdown for a year or more and I love ❤️ the simplicity of just writing my ideas on a text editor (VS Code) without worrying about styling (with a custom theme, previously made)... but the idea of using Markdown with JS seems interesting in some scenarios.

Given that I use Marp to make my slides to teach Computer Sciences topics like Data Structures, OOP, Discrete Mathematics and other related subjects, having the chance to use JS libraries like GoJS or SigmaJS to make interesting diagrams, charts and graphs, could be really cool 👍

I understand clearly that the idea behind Marp is to keep it compatible the Common Markdown Specification, but let's get wild thinking WHAT IF...

• We could have a way to zoom in/out slides
• We could use a dropdown to navigate between titles or pages
• We could have a timer or something similar
• We could have... whatever is in our minds and can be made with JS

I'll try some experiments 🥽⚗️later... and if it work I'll inform you 👍

[yhatt]

CommonMark has HTML tag transparency for using JavaScript through <script> element. For security reason, Marp is blocked HTML tags for executing scripts by default, but it's up to you to allow that. :)

Just as you thought, Marp allows putting client-side JavaScript into Markdown to render dynamic contents on the browser, and injecting server-side JavaScript as Marp plugin to provide new syntax into Markdown. Our slides output is not depending on any frontend frameworks, so you can start from vanilla JavaScript (or integrate Marp Core with the framework you like).

A following example is using Chart.js in Marp. By enabling HTML in Marp tools, you can render chart within Marp slides.

---
marp: true
---

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<div style="width:80%"><canvas id="bar-chart"></canvas></div>

<script type="module">
  const data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];

  new Chart(
    document.getElementById('bar-chart'),
    {
      type: 'bar',
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );
</script>

[j2deme]

To be honest, I've never tried to use a script tag directly on a slide 😅 totally my fault.

I'll try to use the code that you propose to see if I can get the expected results, specially on the part of connecting to an API... I just wonder 🤔 if the transformation won't take too long and return a timeout.

I'll post my results later 👍

As always, thank you very much for your time and patience to solve doubts and to direct the crazy ideas of the users like me 😁

[j2deme]

BTW a couple of months ago I tried to include some iframes on a couple of slides and got the result when working with the preview and HTML export, but when I tried exporting to PDF it returned a blank space.

I also tried with a YouTube embedded video and got a placeholder with text saying something like embeddeding wasn't allowed, which was kind of weird because I embedded the same video on an HTML page... Could it be related to the way Marp parses the iframes?

Just to be clear, I included the --html flag on marp-cli

[yhatt]

Could it be related to the way Marp parses the iframes?

This behavior is related to the browser behavior how to render images located inside iframe. At least Chrome, it is blocked rendering images inside each iframe when printing to PDF. In Firefox, I confirmed that YouTube thumbnail image was blocked but other iframe images seems to be rendered.

You can test the browser behavior when printing on https://jsfiddle.net/c5o9xgbf/.

This seems to be a security decision on the browser side, so it feels difficult to address it on the Marp side. If necessary to render YouTube thumbnail, you can address it by using a facade library like lite-youtube-embed.
https://developer.chrome.com/docs/lighthouse/performance/third-party-facades

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/lite-yt-embed.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/src/lite-yt-embed.min.css" rel="stylesheet">

<lite-youtube videoid="xxxxxxxxxx"></lite-youtube>