Incremental slides do not work with a two-column layout

旧街凉风 提交于 2019-12-05 07:44:34

It is a bit of a hack but you could use the template feature of remarkjs coupled with --.

-- tells remarkjs to use the previous slide as a template. In a template you could use {{content}} to tell where to put the next 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. However, you can use {{content}} inside .class[] so that using -- after will put the next text inside your previous .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. However, when you split a column like .left-column[]:

.left-column[
One paragraph.

--

Another paragraph.
]

The subsets are no longer valid Markdown: neither

.left-column[
One paragraph.

nor

Another paragraph.
]

is valid Markdown, hence they cannot be rendered. Basically when you build incremental slides using --, you have to ask yourself if all text up to this point is valid 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, e.g.,

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!