web-dev-qa-db-ja.com

Markdownを使用したreveal.jsのフラグメント

reveal.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>

以下を使用して、スライドごとにHTMLの代わりにMarkDownを使用することをサポートします。

<section data-markdown>
    ## Page title

    A paragraph with some text and a [link](http://hakim.se).
</section>

しかし、MarkDownを使用したフラグメントの使用に関するドキュメントは見つかりませんでした。私は何かを逃しましたか、それともまだサポートされていませんか？

javascripthtmlmarkdownpresentationreveal.js
25
Uwe L. Korn

タグを追加することで、属性をサポートするようになりました：<!-- .element: class="fragment" -->。

background、indexなど、さらに多くの属性がサポートされています。公式ドキュメントのその他の例を参照してください： 要素属性 、 スライド属性 。

28
Fancyoung

Jezが彼のコメントで指摘したように、マークダウン形式のセクション内にフラグメントを作成しようとしている場合、これが必要です。

* Item 1 <!-- .element: class="fragment" -->
* Item 2 <!-- .element: class="fragment" -->

元のソース- https://stevegrunwell.com/blog/building-presentations-reveal-js/ （リンク切れ）

別のチュートリアルがあります- http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/

10
vijayshankarv

この問題を参照してください フラグメント内のマークダウン そしてフラグメントは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'; });
  }
},
4
jifeng.yin