Inconsistent html tags for unordered list items on incremental slide

[jdtournier]

I've just noticed that the html produced for <ul> items differs between slides when using incremental markers.

Some background

I'm trying to change the spacing between the preceding paragraph and the first list item for tight lists, (i.e. when there is no blank line between the paragraph and list items), e.g.:

A list:
- list item
- list item 2

As far as I can tell can be achieved with this CSS:

p { margin-block-end: 0.2em; }
ul { margin-block-start: 0.2em; }

This works fine, and handles both tight lists and 'wide' lists (with blank lines between list items) as expected:

no blank lines	with blank lines

---

But when using blank lines between list items, and an incremental marker, e.g.

A list

- list item

--
- list item 2

There is a clear shift in position between the first and second slide, as illustrated below:

first slide	second slide

Investigating the generated HTML

I've had a go at investigating what's going on, and I think this is due to difference in the html produced for the first and second slides. In more detail:

With this markdown (tight list):

A list:
- list item
- list item 2

I get the following html (using Google Chrome's inspect functionality):

<ul>
<li>list item</li>
<li>list item 2</li>
</ul>

---

For 'wide' list, I can use this markdown:

A list

- list item

- list item 2

which produces this html:

<ul>
<li><p>list item</p>
</li>
<li><p>list item 2</p>
</li>
</ul>

The difference here is that the contents of the list items are now encased in <p> tags. So far so good.

---

The problem is when adding an incremental marker in between the two list items. With this markdown:

A list

- list item

--
- list item 2

I get this for the first slide:

<ul>
<li>list item</li>
</ul>

but this on the second slide:

<ul>
<li><p>list item</p>
</li>
<li><p>list item 2</p>
</li>
</ul>

Note that on the first slide, the first list item is not encased in a <p> tag, while on the second slide, that same list item now has a <p> tag.

---

This problem only occurs with the incremental marker, and is only an issue because that first slide lacks the enclosing <p> tags around the list item contents. And the issue only manifests with modified CSS styling...

I'd be willing to dig around to figure out where the issue is, but I've no experience with JavaScript, and no idea where to start looking... Any pointers (or even better, solutions!) would be greatly appreciated.

[jdtournier]

OK, I've had a look into this, and I can see it's not going to be easy to fix...

With this input:

A list

- list item

--
- list item 2

For the first slide, the input to Lexer.prototype.token() (which is in the node_modules/marked/lib/marked.js, line 146), is:

"A list\n\n- list item\n"

So no sign of the second list item (as expected). But also no context to determine whether the list is tight or loose, since that depends on the presence of a blank line between list items...

Regardless, the problem arises from the marked module, so I'll close this PR and chase up on the marked repo.

On that note, I can see that #694 includes using a more recent version of marked, I'll see if that already fixes it...