Search code examples
htmlcssr-markdownxaringan

Xaringan text block with >

I'm using R-Markdown to build an html presentation.

I am trying to figure out how to change options for the indented text blocks in Xaringan presentations using css, but I can't figure out what the environment is.

For example, if I am using the following R-markdown:

- Renewable and Non-Renewable Energy  
> [Renewable energy](https://www.nrcan.gc.ca/our-natural-resources/energy-sources-distribution/renewable-energy/about-renewable-energy/7295) is energy derived from natural processes that are replenished at a rate that is equal to or faster than the rate at which they are consumed, e.g. energy generated from solar, wind, geothermal, hydropower and ocean resources.  
- *Clean* vs *Dirty* Energy

I get the output that I want, but I'd like to change the options that affect the appearance of the indented text.

output1

The html source code that's generated comes out as:

- Renewable and Non-Renewable Energy  
> [Renewable energy](https://www.nrcan.gc.ca/our-natural-resources/energy-sources-distribution/renewable-energy/about-renewable-energy/7295) is energy derived from natural processes that are replenished at a rate that is equal to or faster than the rate at which they are consumed, e.g. energy generated from solar, wind, geothermal, hydropower and ocean resources.  
- *Clean* vs *Dirty* Energy

How can I change the spacing around the indented text or, even better, create other similar environments that I can use in my slides?

Basic reproducible example of what I'm talking about:

---
output:
  xaringan::moon_reader:
    nature:
      countIncrementalSlides: false
      ratio: "16:9"
editor: 
  mode: source
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## R Markdown
- Renewable and Non-Renewable Energy  
> [Renewable energy](https://www.nrcan.gc.ca/our-natural-resources/energy-sources-distribution/renewable-energy/about-renewable-energy/7295) is energy derived from natural processes that are replenished at a rate that is equal to or faster than the rate at which they are consumed, e.g. energy generated from solar, wind, geothermal, hydropower and ocean resources.  
- *Clean* vs *Dirty* Energy
Solution

  • You can use Content classes to assign classes to any elements on a slide, too. The syntax is .className[content].

    So to change the spacing around the indented text (i.e. text in p tag within blockquote tag), you can wrap it with a content class and define css property for this class and we can use this class space for other indented text too.

    ---
output:
  xaringan::moon_reader:
    nature:
      countIncrementalSlides: false
      ratio: "16:9"
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

```{css, echo=FALSE}
.space blockquote {
  margin: 2em 1em;
  padding-top: 0.5px;
  padding-bottom: 0.5px;
}

.space blockquote p {
  line-height: 2em;
}
```

## R Markdown

- Renewable and Non-Renewable Energy
.space[
> [Renewable energy](https://www.nrcan.gc.ca/our-natural-resources/energy-sources-distribution/renewable-energy/about-renewable-energy/7295) is energy derived from natural processes that are replenished at a rate that is equal to or faster than the rate at which they are consumed, e.g. energy generated from solar, wind, geothermal, hydropower and ocean resources.  
]

- *Clean* vs *Dirty* Energy  
.space[
> Clean fuel refers to these categories of fuels: kerosene, Liquefied Petroleum Gas (LPG), electricity. In contrast, dirty fuels refer to fuels that are in their solid-state that emit a lot of toxic substances and smoke.
]

    spaced indented text

    And to assign a class for a whole slide, there's a class slide property.