javascript 使用 Markdown 在reveal.js 中的片段

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13705848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 19:33:19  来源:igfitidea点击:

Fragments in reveal.js using Markdown

javascripthtmlmarkdownpresentationreveal.js

提问by Uwe L. Korn

reveal.js supports fragments which will be shown one after another in HTML

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>

It supports using MarkDown instead of HTML for each slide using:

它支持使用 MarkDown 而不是 HTML 为每张幻灯片使用:

<section data-markdown>
    ## Page title

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

But I could not find any documentation on using fragments using MarkDown. Did I miss something or is it not yet supported?

但是我找不到任何关于使用 MarkDown 使用片段的文档。我错过了什么还是它不支持?

回答by Fancyoung

It support attributes now, by adding tag: <!-- .element: class="fragment" -->.

它现在支持属性,通过添加标签:<!-- .element: class="fragment" -->

There are more attributes supported such as background, index, etc. See more examples on official doc: Element Attributes, Slide Attributes.

还有更多的属性支持,如backgroundindex等查看官方文档例子:元素属性幻灯片属性

回答by vijayshankarv

If you are looking to create fragments inside a markdown formatted section as jez pointed out in his comment, this is what you need

如果您想在 jez 在评论中指出的降价格式部分中创建片段,这就是您所需要的

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

Original source - https://stevegrunwell.com/blog/building-presentations-reveal-js/(dead link)

原始来源 - https://stevegrunwell.com/blog/building-presentations-reveal-js/(死链接)

There is another tutorial - http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/

还有另一个教程 - http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/

回答by jifeng.yin

Please refer this issue Markdown inside fragments, and I think the fragment only applies in html level.

请参考此问题Markdown inside fragment,我认为该片段仅适用于 html 级别。

I think you may manipulate the dom after markdown transformed directly, just like this -

我觉得你可以直接操作markdown转化后的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'; });
  }
},