增量幻灯片不适用于两列布局

Question

我正在为 r 使用 xaringan 软件包进行演示：

https://cran.r-project.org/web/packages/xaringan/index.html

它建立在 remark.js 库之上。

我想使用两栏布局，即原始 remark.js 预告演示中的类似内容：

原始 css 规则（嵌入在演示文稿的源代码中）通过以下方式指定布局：

/* Two-column layout */
.left-column {
  color: #777;
  width: 20%;
  height: 92%;
  float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
  color: #000;
}
.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}

问题是，当您在其中一列中使用 -- 时，它没有按预期工作 - 它应该触发增量滑动...

这确实有效，要点会逐渐显示：

# Slide 1
- hello
--
- again

---
# Slide 2
- and one
--
- more

但是在一个列中它不起作用：

.left-column[
# Column 1
- hello
--
- again]

.right-column[
# Column 2
- and one
--
- more]

其次，在原来的remark.jscss规范中，右栏额外除以

.pull-left {
  float: left;
  width: 47%;
}
.pull-right {
  float: right;
  width: 47%;
}
.pull-right ~ p {
  clear: both;
}

再一次，-- 不再起作用，无论是 .pull-right/.pull-left 类还是 "between" 中的增量步骤，即首先显示 .pull-left 部分，而不是 .pull-right 部分。这些问题确实出现在原始 remark.js 中，因此也出现在 xaringan 包中。

毕竟，在右栏中至少有增量幻灯片会很棒。有谁知道如何解决这个问题？我怎样才能修改 css 来完成这个？

编辑：

xaringan 中的整个标记，即在 Rstudio 中写在 rmarkdown 中然后 "knitted" 是：

---
title: "Title"
author: "Myself"
date: "`r format(Sys.Date(), '%d.%m.%Y')`"
output:
  xaringan::moon_reader:
    css: ["default", "custom.css"]
    nature:
      highlightStyle: dracula
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

.left-column[
  ## Left column title
]
.right-column[
 A whole sentence

- one `Markdown` bullet point

--

- a second bullet point
]

在文件 custom.css 中只有左栏和右栏类没有其他内容，这些是从 https://remarkjs.com/

的预告片中复制的

Answer 1

您不能使用两个破折号逐步显示不完整的元素 --。当您使用 -- 拆分段落或列表时，子集仍将是完整且有效的元素。例如，

- One
- Two
--
- Three

项目- One和- Two仍然是一个完整有效的列表。但是，当您拆分像 .left-column[]:

这样的列时

.left-column[
One paragraph.

--

Another paragraph.
]

这些子集不再是有效的 Markdown：都不是

.left-column[
One paragraph.

也不

Another paragraph.
]

是有效的 Markdown，因此无法呈现。基本上，当您使用 -- 构建增量幻灯片时，您必须问问自己，到目前为止的所有文本是否都是有效的 Markdown。

在您的情况下，您必须手动重复某些元素来构建增量幻灯片，这当然效率不高，但这是唯一的方法。如果你研究 https://remarkjs.com 的来源，你会看到 remark.js 的作者正是这样做的，例如

---
layout: false
.left-column[
  ## What is it?
]
.right-column[
  A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:

- Markdown formatting, with smart extensions

....
]

---
.left-column[
  ## What is it?
  ## Why use it?
]
.right-column[
If your ideal slideshow creation workflow contains any of the following steps:

- Just write what's on your mind

....
]

---
.left-column[
  ## What is it?
  ## Why use it?
]
.right-column[
As the slideshow is expressed using Markdown, you may:

- Focus on the content, expressing yourself in next to plain text not worrying what flashy graphics and disturbing effects to put where

....
]

因此，即使 remark.js 的作者在这种情况下也没有魔法，我想您的问题没有一个聪明的解决方案。

Answer 2

有点乱，但您可以结合使用 remarkjs 的模板功能和 --。

-- 告诉 remarkjs 使用上一张幻灯片作为模板。在模板中，您可以使用 {{content}} 来告诉将下一个内容放在哪里。如果不这样做，它会附加在模板的末尾。这就是为什么 -- 用于增量滑动的原因。

如其他答案中所述，您不能在 .class[] 调用中使用 --，因为它不是模板。但是，您可以在 .class[] 中使用 {{content}}，这样在使用 -- 之后会将下一个文本放在上一个 .class[] 中。

这有点 hack，因为我认为它不适用于复杂的增量逻辑。

---
title: "Title"
author: "Myself"
date: "`r format(Sys.Date(), '%d.%m.%Y')`"
output:
  xaringan::moon_reader:
    css: ["default"]
    nature:
      highlightStyle: dracula
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

.left-column[
  ## Left column title
]
.right-column[
 A whole sentence

+ one `Markdown` bullet point
{{content}}

]

--

+ a second bullet point
{{content}}

--

+ a third bullet point
{{content}}

--

    + a sub level

在上一个示例中，右列的文本逐渐出现。

增量幻灯片不适用于两列布局

Incremental slides do not work with a two-column layout

css

r

remarkjs

xaringan

编辑：