reveal.js
reveal.js copied to clipboard
hakimel
Italic Markdown messes up fragments
(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.
This is still true, and applies to any markup within a fragment. For example, bold is a problem as well.
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.
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?
Thanks @busser for the solution. But there should be some better ways to solve it?
The workaround does not work for me. Perhaps it broke in the latest update?
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:
@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...
this workaround works for lists:
- <!-- .element: class="fragment" --> Item one.
- <!-- .element: class="fragment" --> Item <i>two</i>.
Still a workaround, but usable.
just discovered that also this workaround works:
- <!-- .element: class="fragment" --> This is item one.
- This <!-- .element: class="fragment" --> is item *two*.
and this is a hacky solution if you have bold or italic at the beginning of the line:
- ­<!-- .element: class="fragment" --> **This** is item one.
- This <!-- .element: class="fragment" --> is item *two*.
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
As @alpianon said, just add ­<!-- .element: class="fragment" --> before your item content (when they contains links or anything non text).
- ­<!-- .element: class="fragment" --> **This** is item one.
- ­<!-- .element: class="fragment" --> This is [item](https://...) *two*.
Still, a proper fix for this would be great!
Unfortunately this issue/bug still alives. For workaround see the answer from: @ia3andy .
Here is the working example:
- ­<!-- .element: class="fragment" style="font-size:1.2rem" --> <span style="color:orange">list-colored-item</span> with **bold** text
