Фрагменты в show.js с использованием Markdown
opens.js поддерживает фрагменты, которые будут отображаться один за другим в HTML
<section>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p>
<p class="fragment highlight-blue">highlight-blue</p>
</section>
Он поддерживает использование MarkDown вместо HTML для каждого слайда, используя:
<section data-markdown>
## Page title
A paragraph with some text and a [link](http://hakim.se).
</section>
Но я не мог найти документацию об использовании фрагментов с помощью MarkDown. Я что-то пропустил или еще не получил поддержку?
Ответы
Ответ 1
Теперь он поддерживает атрибуты, добавив тег: <!-- .element: class="fragment" -->
.
Поддерживается больше атрибутов, таких как background
, index
и т.д. Дополнительные примеры в официальном документе: Атрибуты элементов, Атрибуты слайдов.
Ответ 2
Если вы хотите создать фрагменты внутри раздела с отформатированной разметкой, как указано в его комментарии, это то, что вам нужно
* Item 1 <!-- .element: class="fragment" -->
* Item 2 <!-- .element: class="fragment" -->
Исходный источник - https://stevegrunwell.com/blog/building-presentations-reveal-js/
Ответ 3
Пожалуйста, обратитесь к этому вопросу Markdown внутри фрагментов, и я думаю
фрагмент применяется только на уровне html.
Я думаю, что вы можете манипулировать dom после того, как уценка трансформировалась напрямую, точно так же -
{ src: 'plugin/markdown/markdown.js',
condition: function() { return !!document.querySelector( '[data-markdown]' ); },
callback: function() {
Array.prototype.forEach.call(document.querySelectorAll('section > p'), function(ele){ ele.className = 'fragment'; });
}
},