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

Question

我现在用的是xaringan包r进行演示：

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

它建立在remark.js库的基础上。

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

https://remarkjs.com/

原始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.js css规范中，右列另外除以

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

再次， --不再工作，既不是在.pull-right / .pull-left类中的增量步骤，也不是在它们之间，即首先显示.pull-left部分，而不是.pull-right部分。 这些问题确实出现在原始的remark.js ，因此也出现在xaringan包中。

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

编辑：

xaringan的整个标记，即在rmarkdown中写入rmarkdown然后“编织”是：

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

这有点像黑客但你可以使用带有--的remarkjs的模板功能。

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

正如在其他答案中所解释的那样，你不能在.class[]调用中使用--因为它不是模板。 但是，您可以使用{{content}}里面.class[]这样使用--后会把下一个文本你以前里面.class[]

这有点像黑客攻击，因为我认为它不适用于复杂的增量逻辑。

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

在前面的例子中，右列的文本以递增方式显示。

Answer 2

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

- One
- Two
--
- Three

项目- One和- Two仍然形成一个完整有效的列表。 但是，当您拆分像.left-column[]这样.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的作者在这种情况下也没有魔力，我想对你的问题没有一个聪明的解决方案。