Инкрементные слайды не работают с двухколоночной разметкой

Я использую 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.jscss спецификация, правая колонка дополнительно делится на

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

2 ответа

Решение

Это что-то вроде взлома, но вы можете использовать функцию шаблона примечаний в сочетании с --,

-- говорит примечаниям использовать предыдущий слайд в качестве шаблона. В шаблоне вы можете использовать {{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

в предыдущем примере правый столбец имеет текст, появляющийся постепенно.

Вы не можете постепенно показывать неполные элементы, используя две черты --, Когда вы разделяете параграфы или списки, используя --, подмножество будет по-прежнему полными и действительными элементами. Например,

- One
- Two
--
- Three

Предметы - One а также - Two по-прежнему формируют полный и действительный список. Тем не менее, когда вы разделяете столбец, как .left-column[]:

.left-column[
One paragraph.

--

Another paragraph.
]

Подмножества больше не действительны. Уценка: ни

.left-column[
One paragraph.

ни

Another paragraph.
]

действительна уценка, следовательно, они не могут быть отображены. В основном, когда вы создаете добавочные слайды, используя --, вы должны спросить себя, является ли весь текст до этого момента действительной уценкой.

В вашем случае вам придется вручную повторять определенные элементы для создания инкрементных слайдов, что, безусловно, неэффективно, но это единственный путь. Если вы изучите источник https://remarkjs.com/, вы увидите, что автор примечания сделал именно это, например,

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

....
]

Так что, если даже в этом случае даже у автора файла mark.js нет волшебства, я думаю, что нет разумного решения вашей проблемы.

Другие вопросы по тегам