How to implement multiple fragment blocks

[unode]

Hi everyone,

I'm trying to understand how to display multiple fragment lists in one slide.

I currently have:

# Slide title

### Sub topic

* Bullet list
    * Bullet list
        * Bullet list
* Bullet list

### Sub topic

1) Numbered list
    1) Numbered list
        1) Numbered list
1) Numbered list

But the starting result shows the second Sub topic right from the start, which is undesired:

I read in other discussion threads that one could use <div data-marpit-fragment> but when I tried it I saw no result.

# Slide title

<div data-marpit-fragment>

### Sub topic

* Bullet list
    * Bullet list
        * Bullet list
* Bullet list

### Sub topic

1) Numbered list
    1) Numbered list
        1) Numbered list
1) Numbered list

</div>

doesn't' work, neither does

# Slide title

<div data-marpit-fragment>

### Sub topic

- Bullet list
    - Bullet list
        - Bullet list
- Bullet list

### Sub topic

1. Numbered list
    1. Numbered list
        1. Numbered list
1. Numbered list

</div>

I'm running marp with a custom theme marp -p demo.md --theme static/css/theme.css

I managed to find a workaround by duplicating content but this approach forces me to manually update changes in all affected slides:

# Slide title

### Sub topic

* Bullet list
    * Bullet list
        * Bullet list
* Bullet list

---

# Slide title

### Sub topic

- Bullet list
    - Bullet list
        - Bullet list
- Bullet list

### Sub topic

1) Numbered list
    1) Numbered list
        1) Numbered list
1) Numbered list

Is there any other way to have the whole slide work as a continuous set of fragments?

[yhatt]

Try this:

# Slide title

### Sub topic

* Bullet list
    * Bullet list
        * Bullet list
* Bullet list

<div data-marpit-fragment>

### Sub topic

</div>

1) Numbered list
    1) Numbered list
        1) Numbered list
1) Numbered list

marp --html -p demo.md --theme static/css/theme.css

data-marpit-fragment attribute will be sanitized by default, so adding --html option is important to allow rendering any kind of HTML elements and attributes.

[unode]

Thanks for the reply. --html seems to be what I was missing.
It now works perfectly for the example provided.

However it doesn't seem to work for (background) images and more complex markdown sections:

<div data-marpit-fragment>

![bg right:40% 100%](static/imgs/image.png)

<div>

and I'm not entirely sure how to do the equivalent to the following on a single slide:

---

# Title

1) Point 1
1) Point 2
    - [link](http://example.com)
1) Point 3
1) Point 4

---

# Title

1. Point 1
1. Point 2
    - [link](http://example.com)
1. Point 3
1. Point 4
    - **With point 4**
    * **Fragment 1**
    * **Fragment 2**
    * **Fragment 3**

![bg right:40% 100%](static/imgs/image.png)

---

I tried using data-marpit-fragment with and without blank lines around the divs but the image was always visible and I couldn't get the markdown in the sub-list (starting with With point 4) to render correctly.

Would you have any suggestions or recommendations for these two use-cases?

[yhatt]

The background image will set just like the style of the slide page <section style="background-image:url('static/imgs/image.png')" />, so it cannot set as fragmented elements. If you want to mark the image as fragmented, you should avoid using ![bg]() syntax.

Example:

# Title

1. Point 1
1. Point 2
    - [link](http://example.com)
1. Point 3
1. Point 4
    - **With point 4**
    * **Fragment 1**
    * **Fragment 2**
    * **Fragment 3**

<img src="static/imgs/image.png" data-marpit-fragment />

<style scoped>
  img[data-marpit-fragment] {
    display: block;
    position: absolute;
    inset: 0 0 0 auto;
    height: 100%;
    width: 40%;
  }
</style>

[unode]

This departs from markdown and loses some of its benefits but indeed works.
Thanks a lot for both replies!