Marp hide slides plugin example

hide-slides-plugin.js

const marpHideSlidesPlugin = (md) => {
  md.marpit.customDirectives.local.hide = (value) => ({
    hide: value === 'true',
  })

  md.core.ruler.after(
    'marpit_directives_apply',
    'marpit_hide_slides',
    (state) => {
      let withinSlide = false
      let isHideSlide = false
      let slideStartIdx = 0
      let slideEndIdx = 0

      for (let i = 0; i < state.tokens.length; i += 1) {
        const token = state.tokens[i]

        if (!withinSlide && token.meta?.marpitSlideElement === 1) {
          withinSlide = true
          isHideSlide = false
          slideStartIdx = i
        }
        if (withinSlide) {
          if (token.meta?.marpitSlideElement === -1) {
            withinSlide = false
            slideEndIdx = i

            if (isHideSlide) {
              state.tokens.splice(
                slideStartIdx,
                slideEndIdx - slideStartIdx
              )
              i = slideStartIdx
            }
          } else if (
            token.type === 'marpit_slide_open' &&
            token.meta?.marpitDirectives.hide
          ) {
            isHideSlide = true
          }
        }
      }
    }
  )
}

module.exports = marpHideSlidesPlugin

hide-slides.md

Error in user YAML: (<unknown>): mapping values are not allowed in this context at line 4 column 34

---
marp: true
theme: default
paginate: true
style: section::after { font-size: xx-large; }
---

Marp hide slides plugin example

git clone https://gist.github.com/13a9f52c96821ae34c3de5f732f305df.git marp-hide-slides
cd ./marp-hide-slides
npm i
npx marp -c ./marp.config.js ./hide-slides.md -p

---

This page has been marked as hidden

<!-- _hide: true -->

---

Architecture

This plugin will strip slide tokens from rendered result if detected a definition of hide custom local directive in the slide.

---

Hide multiple pages

By using hide directive without underscore prefix for scoping, you can hide multiple pages at once.

---

hide custom local directive is also following a general rule of Marpit local directive.

---

Pagination

Marpit's pagination provided by paginate directive is keeping an original page number even if the slide page was hidden.

---

References

• Marpit API: https://marpit-api.marp.app/
• markdown-it API: https://markdown-it.github.io/markdown-it/
  • The most interfaces of Marpit plugin is compatible with markdown-it plugin.

marp.config.js

const marpHideSlidesPlugin = require('./hide-slides-plugin')

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

package.json

{
  "license": "WTFPL",
  "private": true,
  "dependencies": {
    "@marp-team/marp-cli": "^2.1.2",
    "@marp-team/marp-core": "^3.3.2"
  }
}