How to define a "global" div automatically appears on every slide?

[ChiMaoShuPhy]

I really enjoy building slide with marp!

I am wondering is there any way to define something like a "global" div, it automatically appears on every slide?
I tried to define it in header/footer, did not success and I do need header and footer for something else.

thanks for this fabulous tool!

[yhatt]

Generally you have to use Marp CLI, with a customized Marp engine by a plugin. This is a simple example to use the plugin for appending custom HTML snippet into every slides.

// marp.config.js
const appendDivPlugin = (md) => {
  const html = '<div>Your custom HTML is here</div>'

  // Override marpit_slide_close renderer rule to append a specific HTML tag before closing a slide
  const { marpit_slide_close } = md.renderer.rules

  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 html + original
  }
}

module.exports = {
  engine: ({ marp }) => marp.use(appendDivPlugin),
}

marp -c ./marp.config.js ./slide.md

[ChiMaoShuPhy]

Thanks a lot for this detailed example!