---
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; }
2条答案
按热度按时间kyvafyod1#
你可以使用pandoc div(即
:::::
,或:::
等)并为它们分配CSS类或id,然后在一个单独的style.css文件中为类或id选择器定义css规则。显示演示文稿.Rmd
:::
::: {.section4}
This is section 4
:::
::::
:::::
.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;
}
cdmah0mi2#
您还可以定义div元素,如
然后分配您需要的CSS。
看一下here。