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

Question

我正在使用该xaringan包进行r演示:

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

它建立在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-leftclasses中的增量步骤,也不是在它们之间,即首先显示.pull-left部分而不是.pull-right部分.这些问题确实出现在原件内remark.js,因此也出现在xaringan包装中.

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

编辑:

整个标记xaringan,即rmarkdown在Rstudio中写入然后"编织"是:

---
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[]以便使用--after将下一个文本放在您的上一个文本中.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[
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 的作者也没有魔法，我想您的问题也没有聪明的解决方案。