marp-team/marpit

Fragmented list

yhatt opened this issue · 0 comments

yhatt commented

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)