import { Marpit, Element } from '@marp-team/marpit' import 'webslides/static/css/webslides.css' const marpit = new Marpit({ container: [new Element('article', { id: 'webslides' })], }) marpit.markdown.renderer.rules.marpit_slide_open = (t, i, opts, _, self) => `${self.renderToken(t, i, opts)}

` marpit.markdown.renderer.rules.marpit_slide_close = () => '

' const markdown = ` # [Marpit] + [WebSlides] [Marpit]: https://github.com/marp-team/marpit [WebSlides]: https://github.com/webslides/WebSlides --- ## Marpit converts Markdown to HTML \`\`\`javascript const marpit = new Marpit({ container: [new Element('article', { id: 'webslides' })], }) marpit.markdown.renderer.rules.marpit_slide_open = (t, i, opts, _, self) => \`\${self.renderToken(t, i, opts)}

\` marpit.markdown.renderer.rules.marpit_slide_close = () => '

' \`\`\` --- ## WebSlides shows rendered slides in browser \`\`\`javascript require('webslides') window.ws = new WebSlides() \`\`\` ---

## Directives Marpit's \`class\` local directive works seamlessly.

\`\`\` \`\`\`

---

## Components Easy to use WebSlides components by using HTML.

`.trim() const { html } = marpit.render(markdown) document.getElementById('main').innerHTML = html // Initialize WebSlides require('webslides') window.ws = new WebSlides()