15

I am using the xaringan package for r for a presentation:

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

which builds upon the remark.js library.

I would like to use a two column layout, i.e. something like this from the original remark.js teaser presentation:

https://remarkjs.com/

where the original css rules (which are embedded in the source of the presentation) specifies the layout via:

/* 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;
}

The problem is that when you use -- in one of the columns, it does not work as expected - it should trigger an incremental slide...

This does work, bullet points are displayed incrementally:

# Slide 1
- hello
--
- again

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

But within a column it does not work:

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

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

Next to that, in the original remark.js css specification, the right column is additionally divided by

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

And again, the -- does not work anymore, neither with incremental steps within the .pull-right/.pull-left classes nor "between" them, i.e. to display the .pull-left part first, than the .pull-right part. These problems do arise within the original remark.js and therefore also in the xaringan package.

After all, it would be great to have at least incremental slides within the right column. Does anyone have any idea how to fix this? How can I modify the css to accomplish this?

Edit:

The whole markup within xaringan, i.e. as written in rmarkdown in Rstudio and then "knitted" is:

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

Within the file custom.css there is only the left and right column classes nothing else, and these are copied from the teaser presentation from https://remarkjs.com/

4

2 回答 2

11

这有点 hack，但您可以使用 remarkjs 的模板功能加上--.

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

正如其他答案中所解释的，您不能--在.class[]调用中使用，因为它不是模板。但是，您可以使用{{content}}inside .class[]，以便使用--after 将下一个文本放入您的 previous.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

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

于 2018-06-20T11:47:01.370 回答
5

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

- 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 的作者在这种情况下也没有魔法，我想您的问题也没有聪明的解决方案。

于 2017-09-30T16:29:46.587 回答