Set starting number for `ol` when list is interrupted

[mil-ad]

Sometimes I want to have (unindented) blocks between list items but continue the numbering:

1. foo
2. bar

blah blah

3. continue

but the last item is reset to 1.

Common markdown has this in their documentation:

but I haven't managed to get it working with marp and also ) is reserved for fragments anyway.

Is there a way to specify start?

[yhatt]

Could you provide a minimal reproducible example? In the current version of Marp, the example you've provided looks like not to reset the count of the last list item.

Rendered HTML:

<ol>
  <li>foo</li>
  <li>bar</li>
</ol>
<p>blah blah</p>
<ol start="3">
  <li>continue</li>
</ol>

[mil-ad]

you're right. I can see start=3 in the HTML but the render is off for me:

the indentation doesn't look right 🤔

[mil-ad]

oh it's something in my theme/css! Investigating ....

[mil-ad]

sorry for the false alarm

[mil-ad]

It happened because I wanted to customise the color of the li in my css and I ended up doing this:

ol {
  li {
    display: block;
  }
  counter-reset: item;
  > li::before {
    font-weight: bold;
    content: counter(item) ". ";
    counter-increment: item;
    color: $enumerate-color;
    position: absolute;
    left: -1.3em;
  }
}

And above doesn't seem to pick up the right value when we have start

[yhatt]

If you had defined the custom counter item for the list in your CSS, you also have to manage resetting the counter by <ol start="x">. So that means you should make inefficient definitions like following:

ol[start="1"] {
  counter-reset: item 0;
}
ol[start="2"] {
  counter-reset: item 1;
}
ol[start="3"] {
  counter-reset: item 2;
}
/* ...more ol[start="x"] definitions... */

Reference: https://stackoverflow.com/questions/23699128/how-can-i-reset-a-css-counter-to-the-start-attribute-of-the-given-list

Another solution: You also can use the implicitly defined counter list-item by <ol> and <li> instead of defining the custom counter. https://www.w3.org/TR/css-lists-3/#list-item-counter

<style>
li {
  display: list-item;
  list-style: none;
}

li::before {
  content: counter(list-item) ". ";
  font-weight: bold;
  background: red;
  color: white;
}
</style>

1. foo
2. bar

blah blah

3. continue

[!NOTE] Due to the bug of Chromium (Chrome), the live preview provided by Marp for VS Code or other Marp tools may not apply the updation of the starting number immidiately. https://issues.chromium.org/issues/40253067

[mil-ad]

Thanks for that @yhatt!

I changed mine to below and it seems to be working:

ol {
  li::marker {
    color: red;
    font-weight: bold;
  }
}