hakimel / reveal.js

The HTML Presentation Framework
https://revealjs.com
MIT License
67.6k stars 16.63k forks source link

Markdown element attributes breaks code parsing #3067

Open wlnirvana opened 2 years ago

wlnirvana commented 2 years ago

Reproducible example attached below. What I want is the fragment order on the "Working slide" but with the code properly formatted like the "Buggy slide". Is this feasible?

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Demo</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reset.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/theme/black.css" id="theme">
</head>

<body>
    <div class="reveal">
        <div class="slides">
            <section data-markdown data-separator="^\n\n\n" data-transition="none">
                <textarea data-template>
# Buggy slide

1. Hello <!-- .element: class="fragment" -->
2. `int` is a type <!-- .element: class="fragment" -->
3. <!-- .element: class="fragment" --> `double` is a type
4. World <!-- .element: class="fragment" -->

# Working slide

1. Hello <!-- .element: class="fragment" -->
2. int is a type <!-- .element: class="fragment" -->
3. double is a type <!-- .element: class="fragment" -->
4. World <!-- .element: class="fragment" -->
        </textarea>
            </section>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reveal.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/plugin/notes/notes.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/plugin/markdown/markdown.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/plugin/highlight/highlight.js"></script>
    <script>
        Reveal.initialize({
            hash: true,
            slideNumber: true,
            // Learn about plugins: https://revealjs.com/plugins/
            plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
        });
    </script>
</body>

</html>
nkutsche commented 2 years ago

I think this is duplicate of #2507. The break happens since v3.8.0.

fabpiaf commented 11 months ago

Same problem

- <!-- .element: style="display:inline"  --> ![](/pic.jpg)

You can not put the comment behind the picture as it would relate to the resultin <img> and not the <li>