Bespoke with Marp Core

[TheodoreChu]

Hi,
Marp is a very cool tool. I'm trying to create a web app called the Marp Editor (source) that uses Marp Core to generate slides (much like web.marp.app). I have a feature to download the HTML of the slides rendered by Marp Core and I would like to add support for Bespoke and Screenfull like the way that Marp CLI does. Do you have any suggestions on how to do that?

I looked at the Bespoke template in the CLI repository, but it looks like adding Bespoke is not trivial. I tried to inject the extra style and script contents into the html string that is downloaded, but I'm not sure how to store and inject the scripts as string literal since their content seem to escape the string literal.

Thanks for your working on Marp and taking the time to help with this.

[yhatt]

It looks like the problem of your code rather than Marp's problem.

The simplest way is just to concatenate the output string and stringified extra scripts. Taking this will NEVER escape characters because there is no processing to both scripts.

const script = 'alert("your bespoke code")'

const { css, html } = marp.render(markdown)

const output = `
  <style>${css}</style>
  ${html}
  <script>${script}</script>
`

[TheodoreChu]

Great, thank you so much @yhatt. It worked as you said! I didn't know how to stringify scripts but now I do 😄

For anyone reading this in the future, this is how I stringified the extra scripts:

• TheodoreChu/marp-editor@f20c033