Is there a YAML Header config to toggle data-marpit-fragment step-by-step animations per individual PPT?

[jjq0425]

Hi,

I’m working on a collection of PPTs where I need flexible control over the data-marpit-fragment step-by-step animations (the default "one-by-one" list/item reveal effect) for each PPT.

Specifically:

• Some PPTs in the collection should keep the step-by-step animation (retain data-marpit-fragment).
• Others should disable this animation entirely (no data-marpit-fragment attributes, so all content shows at once).

From this discussion, I already learned how to globally disable data-marpit-fragment (e.g., via configuring the Marp plugin to disable the marpit_fragment ruler). However, this approach applies to all PPTs in the project, which is too rigid for my use case.

My core question:

Is there a per-PPT configuration option (preferably via the Markdown YAML Header) to toggle data-marpit-fragment step-by-step animations?

For example, something like:

---
marp: true
theme: default

# Hypothetical config I’m asking about:
fragment: false  # Disable step-by-step animations for THIS PPT only
---

If such a YAML Header config doesn’t exist yet:

• Are there any alternative built-in methods to achieve per-PPT control (e.g., page-level directives, special syntax)?
• Is this a feature that’s being considered for future releases?

Thanks again for your time and support—any guidance here would be greatly appreciated!

[yhatt]

No, Marp does not have a controllable setting to enable or disable fragments via directives, including YAML frontmatter.

In Marpit framework, the handling of data-marpit-fragment is delegated to renderers including Marp. But Marp team treats the build step animations powered by fragments as not good habits for creating an effective presentation slide. So we currently have no motivation to enhance them.

However, Marp also has a flexibility to customize directives and rendering behavior by the plugin, as shown in #594. Thus, you can write a plugin to add a new directive to control fragments and render the attribute accordingly.

Here is an example engine for Marp CLI, with a plugin to define fragment directive to turn on/off fragmented lists.

// marp-engine-with-fragment-directive.mjs
const defaultFragmentState = true // Default state (You can change it if needed)

const fragmentDirectivePlugin = (md) => {
  // Define `fragment` local directive to control fragments
  md.marpit.customDirectives.local.fragment = (value) => {
    const normalized = (value || '').toLowerCase()

    // Set fragment state as boolean if the value can recognize as boolean, and ignore otherwise
    if (normalized === 'true' || normalized === 'false')
      return { fragment: normalized === 'true' }

    return {}
  }

  // markdown-it cannot turn on and off a rule by condition while rendering, so
  // add a new rule to remove already assigned fragment state instead of turning
  // off the rule for the fragmented list.
  md.core.ruler.after('marpit_fragment', 'remove_marpit_fragment', (state) => {
    if (state.inlineMode) return

    let fragmentEnabled = defaultFragmentState

    for (const token of state.tokens) {
      // Recognize the state of `fragment` directive
      if (
        typeof token.meta?.marpitSlide === 'number' &&
        typeof token.meta.marpitDirectives === 'object'
      ) {
        fragmentEnabled =
          'fragment' in token.meta.marpitDirectives
            ? token.meta.marpitDirectives.fragment
            : defaultFragmentState
      }

      // Remove `marpitFragment` meta from list item
      if (
        !fragmentEnabled &&
        token.type === 'list_item_open' &&
        token.meta?.marpitFragment
      ) {
        token.meta.marpitFragment = false
      }
    }
  })
}

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

---
fragment: false
---

* Fragmented list
* was
* disabled

marp --engine marp-engine-with-fragment-directive.mjs markdown.md

In this example, the fragment directive has defined as a local directive. You can control fragmented lists by setting the directive in each slide.

---
fragment: false
---

* This fragmented list
* is
* disabled

---

<!-- fragment: true -->

* But this fragmented list
* is
* enabled

---

<!-- _fragment: false -->

* Scoped local directive
* disables
* fragmented list
* only in this slide

---

* And this slide
* gets back
* fragmented list

• References
  • https://marpit-api.marp.app/
  • https://marpit-api.marp.app/markdown_fragment.js