标签: reveal.js

我使用reveal.js并在Markdown代码中编写我的幻灯片.现在我想在经典的两列文本布局中显示我的内容(文本,无序的项目符号列表甚至图像).我更喜欢在初始配置中可能更复杂的解决方案,只要在Markdown中实际写入内容仍然很容易.

由于我不想运行本地服务器,因此我在主HTML文件中写下了markdown.

更新:第一个答案表明这应该通过CSS实现.(我相应地更新了我的问题.)但是,我找不到任何描述如何使用CSS.

我有reveal.js大约300张幻灯片的演示文稿.本演示文稿的目的是在会议室后面的监视器上以"信息亭模式"循环幻灯片.

为了创建"自助服务终端模式",我得到了:

Reveal.initialize({
    controls: false,    // hide the control arrows
    progress: false,    // hide the progress bar
    history: false,     // don't add each slide to browser history
    loop: true,         // loop back to the beginning after last slide
    transition: fade,   // fade between slides
    autoSlide: 5000,    // advance automatically after 5000 ms
});

这非常有效,但我想将幻灯片随机化.幻灯片目前只是<section>索引文档中300个标签的列表- 它们不会从外部任何地方拉出.目前random: true不是rev​​eal.js中的配置选项.

片段的显示顺序可以用data-fragment-index.是否可以通过部分做类似的事情？有没有办法欺骗reveal.js随机化我的幻灯片？

我的偏好是每次都将它们随机播放 - 也就是说,以随机顺序显示幻灯片1-300,然后将它们随机播放,并以不同的随机顺序再次显示1-300.不过,我也很乐意为每次转换跳转到随机幻灯片.

到目前为止,我很喜欢Reveal.js.但是,我遇到的一个问题是,我的无线演示遥控器通常只能生成左/右箭头键击.我的Reveal.js幻灯片大量使用它的二维功能以及碎片.这意味着我的遥控器只向右移动,而不是向下移动.

Reveal.js API看起来应该足够强大,可以连接一些内容,以便"右箭头"在可能的情况下首先向前推进,然后是正确的,将片段考虑在内.不幸的是我的JS-fu并不那么强大,所以我想我会问其他人之前是否曾做过类似的事情并且有一些指示.如果还有其他方法可以更好地发挥作用,我也会对此持开放态度.我只是不想被绑在键盘上.

标准HTML段落以reveal.js为中心显示.我想将此更改为左对齐,就像在普通网页上一样.我已经看过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>

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

<section data-markdown>
    ## Page title

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

但我找不到任何使用MarkDown使用片段的文档.我错过了什么或者它还没有得到支持吗？

我现在正试图将reveal.js中的透明png图像放入:

<div class="slides">
    <section>
        <img src="sample.png">
        <p>sample image</p>
    </section>
</div>

其中数字"sample.png"如下.

但是,有:

• 白线出现在图的边界
• 而且这个数字并不完美透明.(包含一些白色？)

我们怎样才能删除它？

我在markdown中生成幻灯片,通过pandoc转换为html(with pandoc -s -S -t revealjs test.md -o test.html).

reveal.js框架允许2D设置:在幻灯片子集内"垂直"分组幻灯片,并水平分组幻灯片子集.在降价时,它可以像这样实现:

# Head1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

这会生成预期的输出.结果有四张幻灯片,排列如下:

[  Head 1 ] [ Head 2 ]
[ Below 1 ]
[ Below 2 ]

不过,我想在"Head 1"幻灯片中有更多内容.这在reveal.js中是可能的,但pandoc未正确处理以下markdown:

# Head1

Head text 1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

因为幻灯片级别变为1而不是2,而不是四个幻灯片,我得到两个(每个级别1标题一个).我可以使用pandoc选项强制滑动级别为2:

pandoc -s -S -t revealjs test.md -o test.html --slide-level 2 …

我正在reveal.js为下一个演示文稿工作,我想更改用于标题的默认字体.

如何添加和更改字体reveal.js？

浏览器中是否有针对Google Colab笔记本的演示模式(如Jupyter RISE)？我在文档,常见问题和问题跟踪器中找不到任何内容.

这是我仍然使用Azure笔记本进行演示的原因之一.

https://github.com/googlecolab/colabtools

https://research.google.com/colaboratory/faq.html

https://github.com/damianavila/RISE

我正在尝试为我的reveal.js演示文稿制作一个标题,它位于屏幕顶部.标题中的内容在每个幻灯片的基础上是动态的,因此我必须将标记放在section标记内.

显然,如果标记位于section标记内,则position.js中的position:fixed实际上并不能提供令人满意的结果.我无法弄清楚为什么会这样,但我在github repo中发现了一些信息,建议将显示大小设置为适合视口大小:

Reveal.initialize {
    ...
    width: '100%',
    height: '100%',
    ...
}

但它仍然不适合我 - 似乎演示文稿并没有真正受到上述影响.这是一个演示:

https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html

任何想法如何解决这个问题？