在rmarkdown reveal.js演示文稿中对幻灯片进行分区

dpiehjr4  于 2023-01-28  发布在  其他
关注(0)|答案(2)|浏览(139)

我想把一张幻灯片分成几个部分,并在revealjs演示文稿中使用rmarkdown来设置每个部分的样式。下面的PowerPoint幻灯片是我所追求的总体想法。我相信CSS将是一条可行之路,但我对CSS并不精通,也无法找到任何代码块来解决我的问题。任何帮助都是非常感谢的。

编辑示例中的实际绘图和图片并不重要,我关心的是布局的控制和样式。

kyvafyod

kyvafyod1#

你可以使用pandoc div(即:::::,或:::等)并为它们分配CSS类或id,然后在一个单独的style.css文件中为类或id选择器定义css规则。

显示演示文稿.Rmd

---
title: "Layout in RevealJs Presentation"
output: 
  revealjs::revealjs_presentation:
    css: style.css
---

## R Markdown

::::: {style="display: flex;"}

:::: {.column1}

::: {.section1}

**This is section 1**

Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla.

:::

::: {.section2}

**This is section 2**

Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla.

:::

::::

:::: {.column2}

::: {.section3}

**This is section 3**

```{r}
print("This is section 3")

:::

::: {.section4}

This is section 4

print("This is section 4")

:::

::::

:::::


**样式.css**

.column1,
.column2 {
width: 50%;
}

.section1 {
text-align: left;
color: blue;
margin: 10px 20px 0 0 !important;
font-size: 25px !important;
}

.section2 {
text-align: left;
color: red;
margin: 50px 20px 0 0 !important;
font-size: 25px !important;
}

.section3 {
margin: 10px 20px 0 0 !important;
background-color: dodgerblue;
font-size: 25px !important;
}

.section4 {
margin: 50px 20px 0 0 !important;
background-color: coral;
font-size: 25px !important;
}

.section3 pre,
.section4 pre {
background-color: white;
}


![](https://i.stack.imgur.com/GaNez.png)

作为参考,请阅读Rmarkdown Cookbook中的这一节。
cdmah0mi

cdmah0mi2#

您还可以定义div元素,如

<div id="NW"></div>
<div id="NE"></div>
<div id="SW"></div>
<div id="SE"></div>

然后分配您需要的CSS。
看一下here

相关问题