Инкрементные слайды не работают с двухколоночной разметкой
Я использую xaringan
пакет для r
для презентации:
https://cran.r-project.org/web/packages/xaringan/index.html
который опирается на remark.js
библиотека.
Я хотел бы использовать макет из двух столбцов, то есть что-то вроде этого из оригинала remark.js
презентация тизера:
где оригинал 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-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 нет волшебства, я думаю, что нет разумного решения вашей проблемы.