How to define a button automatically appears on every slide

[ChiMaoShuPhy]

Since adding bespoke plugins are not straight forward, I am wondering is it possible to define an element that automatically (without hard-coded on each slide) appears on every slides, such as a button?

Many thanks!

[yhatt]

You can write a plugin for Marp CLI's bespoke template, to add controller buttons to each slide:

// controllerPlugin.mjs
const controllerHtml = (previousPage, nextPage) => `
  <div>
    <button type="button" ${previousPage === null ? 'disabled' : `onClick="location.hash='${previousPage}'"`}>Prev</Button>
    <button type="button" ${nextPage === null ? 'disabled' : `onClick="location.hash='${nextPage}'"`}>Next</Button>
  </div>
`

const marpCliBespokeControllerPlugin = (md) => {
  const originalRenderer = md.renderer.rules.marpit_slide_close;

  md.renderer.rules.marpit_slide_close = function (tokens, i, options, env, self) {
    const originalResult = originalRenderer(tokens, i, options, env, self)

    const currentPage = tokens[i].meta.marpitSlide + 1
    const totalPages = tokens[i].meta.marpitSlideTotal
    const previousPage = currentPage > 1 ? currentPage - 1 : null
    const nextPage = currentPage < totalPages ? currentPage + 1 : null

    return `${controllerHtml(previousPage, nextPage)}${originalResult}`
  }
}

export { marpCliBespokeControllerPlugin }

// engine.mjs
import { marpCliBespokeControllerPlugin } from './controllerPlugin.mjs'

export default ({ marp }) => marp.use(marpCliBespokeControllerPlugin)

marp --engine ./engine.mjs your-slide.md

[ChiMaoShuPhy]

Thanks a lot for the help, Fantastic!