Italic Markdown messes up fragments

[dploeger]

(Originally reported as dploeger/jekyll-revealjs#8)

Italic conflicts with fragments:

For example, if in one slide I have:

Item one.  <!-- .element: class="fragment" data-fragment-index="1" -->

Item *two*.  <!-- .element: class="fragment" data-fragment-index="2" -->

the word "Item" of element "Item two" will not respect the order of appearance, and will be shown regardless.

[robinparmar]

This is still true, and applies to any markup within a fragment. For example, bold is a problem as well.

[jcfranco]

Test case: http://jsbin.com/sihikodopi/edit?html,output

[ryan-ju]

Any thoughts on this?

[busser]

I've found a workaround to this problem, to help until we find an actual fix.

Placing the HTML comments like this conflicts with the Markdown italics, bold, or code tags:

Item one.  <!-- .element: class="fragment" data-fragment-index="1" -->

Item *two*.  <!-- .element: class="fragment" data-fragment-index="2" -->

However, placing the HTML comments like this seems to work around the problem:

<!-- .element: class="fragment" data-fragment-index="1" --> Item one.

<!-- .element: class="fragment" data-fragment-index="2" --> Item *two*.

The same workaround works with lists:

- <!-- .element: class="fragment" data-fragment-index="1" --> Item one.

- <!-- .element: class="fragment" data-fragment-index="2" --> Item *two*.

I hope this helps people who need it.

[gvolpe]

I came with the intention to raise an issue about it but found this one from a year ago that still holds.

The workaround suggested by @surgicalbanana worked for me, maybe it'd be nice to document this somewhere?

[seriousManual]

thanks @busser that helped.

[xarthurx]

Thanks @busser for the solution. But there should be some better ways to solve it?

[jakupmichaelsen]

The workaround does not work for me. Perhaps it broke in the latest update?

[jakupmichaelsen]

Granted, I'm using reveal-md, but I found another solution that works for me: wrapping the fragments in <div> tags:

## Testing markdown fragments

<div>

<!-- .element: class="fragment" --> 
Test **1** Test
</div>

<div>

<!-- .element: class="fragment"  -->
Test **2** Test
</div>

Note that two line breaks are required after the <div> tag - otherwise it only renders as text.

It works with lists as well:

Testing markdown fragments

<div>

<!-- .element: class="fragment" --> 
- Test **1** Test
</div>

<div>

<!-- .element: class="fragment"  -->
- Test **2** Test
</div>

Renders as:

[kremerd]

@jakupmichaelsen Interesting find! This works for me as well, but is not really usable for lists: Each list item will generate a new list, so there's no common indentation.

Would really love a generic solution for this problem...

[alpianon]

this workaround works for lists:

- <!-- .element: class="fragment" --> Item one.
- <!-- .element: class="fragment" --> Item <i>two</i>.

Still a workaround, but usable.

[alpianon]

just discovered that also this workaround works:

- <!-- .element: class="fragment" --> This is item one.
- This <!-- .element: class="fragment" --> is item *two*.

[alpianon]

and this is a hacky solution if you have bold or italic at the beginning of the line:

- &shy;<!-- .element: class="fragment" --> **This** is item one.
- This <!-- .element: class="fragment" --> is item *two*.

[christofs]

+1 Would love to see this fixed.

[miluoshi]

This is still not fixed today.

Also, the workarounds above don't work for me, because placing fragment before list item text doesn't render formatting in line:

- <!-- .element: class="fragment" --> line 1
- <!-- .element: class="fragment" --> **line 2** with some `inline code`

☝️ Doesn't render formatting in the 2nd line

[ia3andy]

As @alpianon said, just add &shy;<!-- .element: class="fragment" --> before your item content (when they contains links or anything non text).

- &shy;<!-- .element: class="fragment" --> **This** is item one.
- &shy;<!-- .element: class="fragment" --> This is [item](https://...) *two*.

Still, a proper fix for this would be great!

[mehmetozanguven]

Unfortunately this issue/bug still alives. For workaround see the answer from: @ia3andy .

Here is the working example:

- &shy;<!-- .element: class="fragment" style="font-size:1.2rem" --> <span style="color:orange">list-colored-item</span>  with **bold** text

[darkmattercoder]

Still true with 4.6.0

[georgms]

Still true with 5.0.4