Marp
Replies: 2 comments
-
|
If assumed you are mentioning to Marp CLI HTML template, there is no easy way because CLI hardly expect them to be customized. Technically you can modify opening and closing tag of // engine.js (for Marp CLI)
const { Marp } = require('@marp-team/marp-core')
const { default: plugin } = require('@marp-team/marpit/plugin')
// Create Marpit plugin to modify rendering of opening and closing tag for slide
const modifySlideOpenPlugin = plugin((md) => {
// Store original rules
//
// Marp Core is enabling inline SVG mode by default so the modified tag(s)
// will place as the part of HTML inside SVG. You may have to modify
// `marpit_inline_svg_open` rule and `marpit_inline_svg_close` rule instead,
// to place HTML elements into the world of template HTML.
const { marpit_slide_open, marpit_slide_close } = md.renderer.rules
// Override renderer rules
md.renderer.rules.marpit_slide_open = (tokens, idx, opts, env, self) => {
const renderer = marpit_slide_open || self.renderToken
const original = renderer.call(self, tokens, idx, opts, env, self)
return '<p>Added paragraph before opening section tag</p>' + original
}
md.renderer.rules.marpit_slide_close = (tokens, idx, opts, env, self) => {
const renderer = marpit_slide_close || self.renderToken
const original = renderer.call(self, tokens, idx, opts, env, self)
return original + '<p>Added paragraph after closing section tag</p>'
}
})
// Export engine for Marp CLI
module.exports = (opts) => new Marp(opts).use(modifySlideOpenPlugin)npm i @marp-team/marpit @marp-team/marp-core @marp-team/marp-cli
npx marp --engine engine.js your-markdown.mdIf you want to build the custom HTML template from scratch, it might be better to use Marp Core directly. This is a simple example that is based on getting started for Marpit framework: const fs = require('fs')
const { Marp } = require('@marp-team/marp-core')
const marp = new Marp({ container: false, inlineSVG: false })
const markdown = `
# Your markdown
---
...
`.trim()
const { html, css } = marp.render(markdown, { htmlAsArray: true })
const htmlFile = `
<!DOCTYPE html>
<html><body>
<style>${css}</style>
${html
.map((htmlContent) => `<p>Before</p>${htmlContent}<p>After</p>`)
.join('')}
</body></html>
`
fs.writeFileSync('output.html', htmlFile.trim()) |
Beta Was this translation helpful? Give feedback.
-
APPENDIXIn 2 years ago, I've planned a similar concept about layers for the slide. (marp-team/marpit#194) Currently we are not taking for that due to less feedbacks, but your case may be similar to the planned layer concept. We would like to get your feedback. |
Beta Was this translation helpful? Give feedback.
-
Is there an easy way to add/modify the html templates? I have the need to possible add some extra div tags around the section to make some more complex layered slides? Is this possible?
Beta Was this translation helpful? Give feedback.
All reactions