Reveal.js: Markdown processed incorrectly inside Markdown fragments added with element attributes

[mthmulders]

In my Reveal.js presentations I have some math equations. I prefer to have my slides in external Markdown files.

Now, in Reveal.js 3.6.0 this worked great, but in 3.8.0 it doesn't work anymore. The equations have a red backslash, some markup is not processed (showing _note_ instead of _note_) and the animations are out of order.

Initially, 3.6.0 renders as

But in 3.8.0, this becomes

In the end state, 3.6.0 renders as

Whereas 3.8.0 renders as

I've created a repo with both versions in it.

[mthmulders]

Seems to have been introduced with 3.8.0, as 3.7.0 works just like 3.6.0.

[mthmulders]

Adding the slidechanged or fragmentshown event handlers (as described in #226 resp #505) doesn't help.

[burgerga]

I don't know why it changed, but it is preprocessed by markdown. You might need an extra escape so \\* instead of \*. The other suggestions I came across is placing the equation in backticks but that might not work.

[burgerga]

I don't know why it changed, but it is preprocessed by markdown. You might need an extra escape so \\* instead of \*. The other suggestions I came across is placing the equation in backticks but that might not work.

Never mind, it's actually the other way around, you don't need the backslashes anymore (the reason it's red, is because mathjax flags it as an unknown command). Just a * should work, so for example:

1. $(d * 3) − 1  \mod (10 * 16) = 0$
1. <!-- .element: class="fragment" --> $(d * 3) − 1  \mod (10 * 16) = 0$

Don't know why it changed though, it's not something in the math plugin, I guess something in markdown.js. Very strange how in

1. $(d \* 3) − 1  \mod (10 \* 16) = 0$
1. <!-- .element: class="fragment" --> $(d \* 3) − 1  \mod (10 \* 16) = 0$

the top line works, but not the bottom.

[mthmulders]

Thanks for your reply, @burgerga. Removing the backslash indeed fixes rendering of the formula.

The other issue still remains: markup that is part of a fragment is not applied. So where you would have

<!-- .element: class="fragment" -->This is an _example_ fragment.

You would expect the word "example" to emphasised, e.g.This is an <em>example</em> fragment. Instead, it becomes This is an _example_ fragment.

[mthmulders]

I've added Reveal 3.9.2 to the repo.

[Brickaction]

7.3.11

[mthmulders]

I'm not sure what that means, @Brickaction....

[burgerga]

Thanks for your reply, @burgerga. Removing the backslash indeed fixes rendering of the formula.

The other issue still remains: markup that is part of a fragment is not applied. So where you would have

<!-- .element: class="fragment" -->This is an _example_ fragment.

You would expect the word "example" to emphasised, e.g.This is an <em>example</em> fragment. Instead, it becomes This is an _example_ fragment.

Yes, I guess this is the real issue, so it's not MathJax related at all actually. The markdown is simply not processed anymore (if markdown would be processed, the backslash in \* would have been removed, which is why \* works outside of fragments).
Maybe you can change the title of your bug.

@hakimel do you have any idea what changed? (also happens in v4)

[mthmulders]

I'm not sure I correctly understand... Something like "Markdown is not processed inside Reveal fragments" ?

[burgerga]

Yes almost, to be more specific "Markdown processed incorrectly inside Markdown fragments added with element attributes", because if you modify https://revealjs.com/markdown/#element-attributes to

- Item 1 <!-- .element: class="fragment"  -->
- Item 2 test <!-- .element: class="fragment"  -->
- Item 3 _test_ <!-- .element: class="fragment"  -->
- <!-- .element: class="fragment"  --> Item 4 _test_ 

this also gives very unexpected results.

[gitpitch]

I wonder if the issue was introduced when the revealjs dependency on _marked_ was updated to v0.6.0. That update happened in reveal 3.8.0. Possibly as a result of this change to marked. It might be worth dropping in the older v0.5.2 library to see if the upgrade to v0.6.0 is indeed the culprit.

[mthmulders]

Good catch, @gitpitch. I've changed my repo to use Reveal 3.8.0 with the Marked version that shipped with 3.7.0. Reverting the backslash-change makes the slide behave as before.

[burgerga]

Just the marked.js or also the markdown.js? Because when I try to use marked 0.5.2 in reveal 4.0.0 it still doesn't work for me 😕

EDIT:
does this also work correctly for you with marked 0.5.2?

- Item 1 <!-- .element: class="fragment"  -->
- Item 2 test <!-- .element: class="fragment"  -->
- Item 3 _test_ <!-- .element: class="fragment"  -->
- <!-- .element: class="fragment"  --> Item 4 _test_ 

[mthmulders]

Just the marked.js or also the markdown.js? Because when I try to use marked 0.5.2 in reveal 4.0.0 it still doesn't work for me 😕

That was with marked.js and markdown.js from Reveal 3.7.0.

EDIT:
does this also work correctly for you with marked 0.5.2?

With Reveal 3.8.0 and both marked.js and markdown.js from Reveal 3.7.0, I see appearing (in order):

• Item 3
• Item 1
• Item 2 test
• _test_ behind Item 3
• Item 4 _test_

[Brickaction]

I'm not sure what that means, @Brickaction....

Neither do I but I feel like those numbers are important

[burgerga]

Reported as troll.

[burgerga]

That was with marked.js and markdown.js from Reveal 3.7.0.

Ah, so the issue is not marked.js but rather the markdown.js plugin which uses marked.js. I quickly had a look at it, but between 3.7.0 and 3.8.0 there was a substantial rewrite of the plugin (https://github.com/hakimel/reveal.js/compare/3.7.0...3.8.0, see Files changed), and I'm completely unfamiliar with that code, so I hope @hakimel will step in and have a look at it :wink:

With Reveal 3.8.0 and both marked.js and markdown.js from Reveal 3.7.0, I see appearing (in order):

• Item 3
• Item 1
• Item 2 test
• _test_ behind Item 3
• Item 4 _test_

This is then the second issue :disappointed:, which has probably never worked as intended
So the fragment element attribute should be added right after the */- to make it work properly with markdown in the items, so instead of

<section data-markdown>
  <script type="text/template">
    - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
    - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
  </script>
</section>

the documentation should probably read

<section data-markdown>
  <script type="text/template">
    - <!-- .element: class="fragment" data-fragment-index="2" --> Item 1
    - <!-- .element: class="fragment" data-fragment-index="1" --> Item 2
  </script>
</section>

to circumvent this.