[英]Incremental slides do not work with a two-column layout
I am using the xaringan
package for r
for a presentation: 我现在用的是
xaringan
包r
进行演示:
https://cran.r-project.org/web/packages/xaringan/index.html https://cran.r-project.org/web/packages/xaringan/index.html
which builds upon the remark.js
library. 它建立在
remark.js
库的基础上。
I would like to use a two column layout, ie something like this from the original remark.js
teaser presentation: 我想使用两列布局,即原始的
remark.js
预告片演示中的remark.js
内容:
https://remarkjs.com/ https://remarkjs.com/
where the original css
rules (which are embedded in the source of the presentation) specifies the layout via: 原始
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;
}
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 接下来,在原始的
remark.js
css
规范中,右列另外除以
.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, ie to display the .pull-left
part first, than the .pull-right
part. 再次,
--
不再工作,既不是在.pull-right
/ .pull-left
类中的增量步骤,也不是在它们之间,即首先显示.pull-left
部分,而不是.pull-right
部分。 These problems do arise within the original remark.js
and therefore also in the xaringan
package. 这些问题确实出现在原始的
remark.js
,因此也出现在xaringan
包中。
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?
如何修改css来完成此任务?
The whole markup within xaringan
, ie as written in rmarkdown
in Rstudio and then "knitted" is: 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
]
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/ 在
custom.css
文件中,只有左侧和右侧的列类别,而这些类别是从https://remarkjs.com/的预告片演示文稿中复制而来的。
It is a bit of a hack but you could use the template feature of remarkjs coupled with --
. 这有点像黑客但你可以使用带有
--
的remarkjs的模板功能。
--
tells remarkjs to use the previous slide as a template. --
告诉remarkjs使用上一张幻灯片作为模板。 In a template you could use {{content}}
to tell where to put the next content. 在模板中,您可以使用
{{content}}
来告知下一个内容的放置位置。 If you don't, it is append at the end of the template. 如果不这样做,则会附加在模板的末尾。 it is why
--
is used for incremental slide. 这就是为什么
--
用于增量幻灯片。
As explained in other answer, you cannot use --
inside a .class[]
call as it isn't a template then. 正如在其他答案中所解释的那样,你不能在
.class[]
调用中使用--
因为它不是模板。 However, you can use {{content}}
inside .class[]
so that using --
after will put the next text inside your previous .class[]
. 但是,您可以使用
{{content}}
里面.class[]
这样使用--
后会把下一个文本你以前里面.class[]
It is a bit of a hack because I don't think it will work with complicated incremental logic. 这有点像黑客攻击,因为我认为它不适用于复杂的增量逻辑。
---
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
in the previous exemple, the right column has text appearing incrementally. 在前面的例子中,右列的文本以递增方式显示。
You cannot incrementally show incomplete elements using two dashes --
. 您无法使用两个破折号逐步显示不完整的元素
--
。 When you split paragraphs or lists using --
, the subset will still be complete and valid elements. 使用
--
分割段落或列表时,子集仍将是完整且有效的元素。 For example, 例如,
- One
- Two
--
- Three
The items - One
and - Two
still form a complete and valid list. 项目
- One
和- Two
仍然形成一个完整有效的列表。 However, when you split a column like .left-column[]
: 但是,当您拆分像
.left-column[]
这样.left-column[]
:
.left-column[
One paragraph.
--
Another paragraph.
]
The subsets are no longer valid Markdown: neither 子集不再有效Markdown:两者都没有
.left-column[
One paragraph.
nor 也不
Another paragraph.
]
is valid Markdown, hence they cannot be rendered. 是有效的Markdown,因此无法呈现。 Basically when you build incremental slides using
--
, you have to ask yourself if all text up to this point is valid Markdown. 基本上,当您使用
--
构建增量幻灯片时,您必须问自己,到目前为止所有文本是否都是有效的Markdown。
In your case, you have to manually repeat certain elements to build incremental slides, which is certainly not efficient, but that is the only way to go. 在您的情况下,您必须手动重复某些元素来构建增量幻灯片,这当然效率不高,但这是唯一的方法。 If you study the source of https://remarkjs.com , you will see the author of remark.js did exactly that, eg,
如果你研究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
....
]
So if even the author of remark.js does not have the magic in this case, I guess there isn't a clever solution to your problem. 因此,如果即使是remark.js的作者在这种情况下也没有魔力,我想对你的问题没有一个聪明的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.