-
|
I've got some step-by-step highlights in a code block, and have also got per-fragment slide timing working, but I'm not sure if I can do both at once. That is, can I control the timing of each individual highlighted code fragment? Note: I'm currently using the Markdown plugin for my slides, but I don't think that's relevant as this limitation seems to exist regardless. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
You can achieve this by adding fragments with
Here's a full example: <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="dist/reset.css" />
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/black.css" />
<link rel="stylesheet" href="plugin/highlight/monokai.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<pre><code class="hljs js" data-trim data-line-numbers="|1|2|3|" data-fragment-index="0">
// Highlight for 2 seconds
// Highlight for 4 seconds
// Highlight for 6 seconds
</code></pre>
<ul>
<li class="fragment" data-autoslide="2000" data-fragment-index="0">2</li>
<li class="fragment" data-autoslide="4000" data-fragment-index="1">4</li>
<li class="fragment" data-autoslide="6000" data-fragment-index="2">6</li>
<li class="fragment" data-fragment-index="3">The end</li>
</ul>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script>
Reveal.initialize({ autoSlide: 1000 });
</script>
</body>
</html>Note that this only worked if the fragments appeared before the code block before in the DOM, however I just pushed a fix for that in c8a7f26. |
Beta Was this translation helpful? Give feedback.
You can achieve this by adding fragments with
data-autoslideat the same fragment index as your code highlights.data-fragment-index="0"on the highlighted code block. The first code highlight has fragment index 0, the second is 1 and so on.data-fragment-indexon each of your fragments so that they appear at the same time as the code highlights.data-autoslideon each of your fragments and the code highlight will remain visible for the same duration.Here's a full example: