Skip to content

Fragmented list #145

@yhatt

Description

@yhatt

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions