Reveal.js是一个允许使用HTML轻松创建精美演示文稿的框架。
如何在 quarto/revealjs 演示文稿中添加两个视频（并排）？
我找不到在 quarto/revealjs 中并排放置两个视频的方法。 --- 标题：《普鲁巴》 格式：revealjs --- ＃＃ 文本 ：：： 列 ::: {.列宽=“50%”} 废话 ::: ::: {.c...
我使用reveal.js并用Markdown代码编写幻灯片。现在我想以经典的两列文本布局显示我的内容（文本、无序列表的项目符号列表甚至图像）。我想要一个
使用reveal.js向Rmarkdown中的markdown表添加增量选项
我有一个类似的表格，我使用 Rmarkdown 在幻灯片上将其呈现为reveal.js html 演示文稿： |变量|类|描述| |:------------------|:---------|:----------...
我想在所有幻灯片中添加图像作为背景，除了使用 Quarto Markdown 创建的 Revealjs 演示文稿的标题幻灯片。到目前为止我已经做到了： ## 标题 {background-image="imag...
我想更改四开版中两列布局的一部分的字体大小。这是一些无需更改字体大小的可重现代码： --- 输出：revealjs --- ：：：： {。列} ::: {.co...
四开本中的一般 RevealJS / ImpressJS 问题
我想获得一些关于实现以下内容的建议，但在 R 的四开本中使用 css/scss。我的背景不是js、css或scss，但我已经成功下载并安装了impress.js文件...
表格大小调整功能似乎对改变四开的revealjs幻灯片输出的flextable对象的尺寸没有太大作用。默认输出的字体非常小，填充很多，而且...
在Quarto markdown中，我正在创建一个revealjs演示文稿，我想要一个列表，其中最后一个项目显示在其他项目之后。如果我在列表中暂停（或者我将最后一个项目放在片段中......
如果包含的文件发生更改，quarto RevealJS 会重新渲染
我正在使用四开来创建revealjs 幻灯片。我有一个主文件 science.qmd 看起来与此类似 --- 标题：“标题” 作者：“我” 日期：“2023-09-01” 目录：假
Quarto HTML/RevealJS 文档中如何设置代码注释大小？
在Quarto中创建RevealJS / HTML文档并利用代码注释功能。然而，生成的注释（编号圆圈和随附的文本）比我想要的要大。 ...
我正在使用带有水平和垂直幻灯片的四开 Markdown 在 Reveal 中创建演示文稿。第一级幻灯片的内容是垂直居中的，有没有办法（可能使用CSS）...
我想知道这是否可以在四开演示文稿中完成：假设您有两个徽标：logo1.png 和 logo2.png。目标是在一张幻灯片中使用 logo1.png，在另一张幻灯片中使用 logo2.png，在
为什么 quarto Revealjs 无法渲染没有文本或片段的图像？
我在使用四开版时遇到了一个奇怪的问题，除非我在幻灯片上包含文本或将图像包装在片段中，否则图像将不会呈现。 这是三个示例 .qmd 幻灯片，说明了我...
Jupyter Notebook 的 RISE 缺少幻灯片按钮
我按照使用 Anaconda (conda) 为 Jupyter 笔记本安装 RISE 的说明进行操作，但工具栏中从未显示“进入/退出 RISE 幻灯片”按钮。 我按照推荐...
基本上我正在制作一个简单的作品集网站，其中一个页面上有一个画廊。 从我从scrollreveal网站复制粘贴的脚本中，从左到右加载我的图像，但我不知道......
如何在 quarto Reveal.js 演示文稿中增加徽标大小
在我的 quarto Reveal.js 演示文稿中，我通过将其放入 yaml 中，在幻灯片模板的左下角添加了一个徽标： 格式： Revealjs： 徽标：mylogo.png 徽标显示得非常小。安永...
Reveal.js 是一个非常好的 HTML 演示框架。我对 HTML+CSS+JavaScript 的了解有限，但可以自己阅读并进行细微的更改。 看起来最新版本有一些前...
考虑将下表声明为reveal.js 库中幻灯片的一部分： 考虑将下表声明为 reveal.js 库中幻灯片的一部分： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="dist/reset.css"> <link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides"> <section> <table> <tr> <td> <div style="width: 100px; height: 200px; background-color: red;"></div> </td> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td> </tr> </table> </section> </div> </div> <script src="dist/reveal.js"></script> <script> Reveal.initialize({ hash: true, plugins: [ ] }); </script> </body> </html> 我在普通 HTML 中得到以下结果（没有 reveal.js，仅使用 <table> 部分）： 在 reveal.js 中获得此结果时，我注意到与正常 HTML 输出相比存在一些差异： 实际上，当使用简单文本或 <p> 而不是 <div> 或 <img> 时，该库效果很好。 怎样才能达到和普通HTML一样的效果？
有没有一种简单的方法可以将四开的标题居中？我使用revealjs 格式。我想在本地做这个。 我尝试过使用 Fig-cap-location="center" 但它不起作用。 再现...
我正在尝试重用 Reveal.js HTML 幻灯片的一个区域，这样当您第一次输入幻灯片时，就会出现一个标题和一些介绍性文本（Lorem ...）。 Lorem ipsum dolor sit amet，</desc> <question vote="1"> <p>我正在尝试重用 <pre><code>Reveal.js</code></pre> HTML 幻灯片的区域，这样当您第一次输入幻灯片时，就会出现标题和一些介绍性文本（Lorem ...）。</p> <pre><code><TITLE> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </code></pre> <p>连续点击右箭头会出现<pre><code>Foo</code></pre>，它的内容会出现，一次一行：</p> <pre><code><TITLE> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Foo • apple • banana • cake </code></pre> <p>一旦我完成了上面的循环，我想用这个“Bar”小节来替换幻灯片（屏幕）的“Foo”区域。</p> <pre><code><TITLE> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bar • donut • eggs • fish </code></pre> <p>问题（见下面的动画图像）是</p> <ul> <li><p>我似乎无法淡化“Foo”然后继续“Bar”；</p> </li> <li><p>幻灯片上的内容是堆叠的，即“Bar”出现在<em>under</em>幻灯片的“Foo”区域。</p> </li> </ul> <hr/> <p><a href="https://i.stack.imgur.com/ltKfB.gif" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2x0S2ZCLmdpZg==" alt=""/></a></p> <hr/> <pre><code><section> <h1>My title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p> <span class="fragment fade-out"> <h3 class="fragment" data-fragment-index="0">Foo</h3> <ul> <span class="r-stack"> <p class="fragment current-visible" data-fragment-index="1">• Apple 🍏</p> <p class="fragment current-visible" data-fragment-index="2">• Banana 🍌</p> <p class="fragment current-visible" data-fragment-index="3">• Cake 🍰</p> </span> </ul> </span> <span class="fragment fade-out"> <h3 class="fragment" data-fragment-index="4">Bar</h3> <ul> <span class="r-stack"> <p class="fragment current-visible" data-fragment-index="5">• Donut 🍩</p> <p class="fragment current-visible" data-fragment-index="6">• Eggs 🍳</p> <p class="fragment current-visible" data-fragment-index="7">• Fish 🐟</p> </span> </ul> </span> </section> </code></pre> </question> <answer tick="false" vote="0"> <p>底部的解决方案。但首先，让我解释一下。</p> <p>制作第一部分：</p> <pre><code>Foo • apple • banana • cake </code></pre> <p>一次出现一行，你必须删除<pre><code>r-stack</code></pre>。 <pre><code>r-stack</code></pre> 是把东西放在一起。</p> <p>对于“栏”部分来替换以前的内容，它必须在单独的幻灯片上 - 它必须在单独的 <pre><code><section></code></pre> 中。 （也许还有其他方法，我不确定。）</p> <p>代码中的一个问题是使用<pre><code>current-visible</code></pre>。这是 Reveal.JS 自己使用的类，最好不要碰它。</p> <p>最后要注意的一点是，有一个列表（<pre><code><ul></code></pre>）但不使用列表项（<pre><code><li></code></pre>）在里面。但这不会引起任何问题。</p> <p>总的来说，下面的方法很简单。</p> <pre><code><section data-transition="fade-out"> <h3>Foo</h3> <ul> <li class="fragment">Apple 🍏</li> <li class="fragment">Banana 🍌</li> <li class="fragment">Cake 🍰</li> </ul> </section> <section data-transition="fade-in"> <h3>Bar</h3> <ul> <li class="fragment">Donut 🍩</li> <li class="fragment">Eggs 🍳</li> <li class="fragment">Fish 🐟</li> </ul> </section> </code></pre> </answer> <answer tick="false" vote="0"> <p>经过多次测试后，我找到了一个解决方案。</p> <p><strong>注意事项</strong></p> <ul> <li><p>Per StackOverflow <a href="https://stackoverflow.com/q/2941189/1904943">How to overlay one div over another div</a> I stack elements to get Reveal.js <pre><code>r-stack</code></pre> to reuse the part of the slide.</p> </li> <li><p>我包括左对齐内容的 CSS 样式。</p> </li> <li><p>自定义项目符号和标题 (<pre><code><h1></code></pre>) - 除了默认的 Reveal.js 样式外，其他样式可能很困难/有问题。为简单起见，我倾向于对 UTF-8 项目符号 • 进行硬编码，并使用 CSS 来完成自定义标题文本（大小；重量；... - 例如“fsh4”，即下面的“字体样式 h4”）。</p> </li> <li><p>我是Reveal.js新手；在我的用例中，我看不到让“Foo”片段淡入然后在不需要时淡出的方法。我笨拙的解决方案是为每个子内容行（“项目符号”）重复这些标题，通过 CSS 将后者向下推。</p> </li> <li><p>动画 GIF 说明附加的最终解决方案（抱歉 - 不知道 Reveal.js 的类似 JSFiddle 的游乐场）。</p> </li> </ul> <hr/> <p><strong>HTML</strong></p> <pre><code><section> <h3>Some foods</h3> <!-- https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div --> <div id="container"> <div class="position_left"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div id="subcontainer_1"> <span class="r-stack"> <p class="fragment current-visible" data-fragment-index="0"><span id=fsh4>Foo</span></p> <p class="fragment current-visible" data-fragment-index="1"><span id=fsh4>Foo</span></p> <p class="fragment current-visible" data-fragment-index="2"><span id=fsh4>Foo</span></p> <p id="nup3ooth" class="fragment current-visible" data-fragment-index="1">• Apple 🍏</p> <p id="nup3ooth" class="fragment current-visible" data-fragment-index="2">• Banana 🍌</p> </span> </div> <div id="subcontainer_2"> <span class="r-stack"> <p class="fragment current-visible" data-fragment-index="3"><span id=fsh4>Bar</span></p> <p class="fragment current-visible" data-fragment-index="4"><span id=fsh4>Bar</span></p> <p class="fragment current-visible" data-fragment-index="5"><span id=fsh4>Bar</span></p> <p id="nup3ooth" class="fragment current-visible" data-fragment-index="4">• Cake 🍰</p> <p id="nup3ooth" class="fragment current-visible" data-fragment-index="5">• Donut 🍩</p> </span> </div> </div> </div> </section> </code></pre> <p><strong>CSS</strong></p> <pre><code><style> /* ---------------------------------------- */ /* POSITION LEFT */ /* https://github.com/hakimel/reveal.js/issues/1897 */ .reveal .position_left { text-align: left; } .reveal .position_left p { margin: 1.0rem 1.0rem 1.0rem 0.5rem; font-size: 1.0rem; } /* ---------------------------------------- */ /* ---------------------------------------- */ /* CONTAINER DIV */ /* https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div */ #container { position: relative; } #subcontainer_1 { width: 100%; position: absolute; } #subcontainer_2 { width: 100%; position: absolute; } /* ---------------------------------------- */ /* ---------------------------------------- */ /* FONT STYLES */ /* Push the "bullets" down" (order top right bottom left): */ #nup3ooth { padding: 2.0rem 0.0rem 0.0rem 1.0rem; } /* Note: no space following "span": */ span#fsh4 { font-size: 1.25rem; margin: 0.0rem 0.0rem 0.0rem 0.0rem; } /* ---------------------------------------- */ </style> </code></pre> <hr/> <p><strong>屏幕截图</strong>（动画GIF）</p> <p><a href="https://i.stack.imgur.com/cBVZd.gif" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2NCVlpkLmdpZg==" alt=""/></a></p> <hr/> </answer> </body></html>