Fragmented list

[Yuki Hattori]

We are considering to support the fragmented list, to appear the content of lists one by one.

CommonMark provides some markers for building list. The unordered list allows using -, +, and *, and the ordered list allows 1. and 1). We want to parse the less frequency-used marker as the fragmented list, and let it parsable as fragmented in Marpit integrated tools (e.g. Marp Core and integrated apps).

<!-- Regular list -->
- One
- Two
- Three

1. One
2. Two
3. Three

---

<!-- Fragmented list -->
* One
* Two
* Three

1) One
2) Two
3) Three

Currently, Marpit will render a pair of pages with exact same DOM structures by parsing this example.

<section>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
</section>

When using * or 1), Marpit would add data-marpit-fragment data attribute to the list and show the fragmentation level. The slide container (<section>) would be added data-marpit-fragments attribute to store the total fragmentation level of the page.

<section data-marpit-fragments="6">
  <ul>
    <li data-marpit-fragment="1">One</li>
    <li data-marpit-fragment="2">Two</li>
    <li data-marpit-fragment="3">Three</li>
  </ul>
  <ol>
    <li data-marpit-fragment="4">One</li>
    <li data-marpit-fragment="5">Two</li>
    <li data-marpit-fragment="6">Three</li>
  </ol>
</section>

It allows parsing data attributes by integrated apps. For example, Marp CLI's bespoke template, using Bespoke.js, can parse and allow one-by-one appearing by using a plugin based on bespoke-bullets.

Current draft is scalable for the other elements, so we don't expect to use bespoke-bullets as is.

Similar requests are reported to yhatt/marp: yhatt/marp#55 and yhatt/marp#257. These suggestions will probably allow any elements as the fragmented target, but it might require to manipulate rendered DOM to wrap by the element whose data-marpit-fragment in some cases. Marpit hates implicit DOM manipulation because it may break CSS theme, so we focus on the list first. (Resolves yhatt/marp#89)