Xaringan text block with >

Question

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.

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  

Answer 1

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

---

---

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

Answer 2

Thank you.

The answers to my (poorly posed) question(s) was/were:

1. The ">" in R-Markdown triggers the blockquote class, so you can change appearance/ properties for that using CSS.

2. Use CSS to create a new / incremental style with similar properties.

In my case, I was looking to create a small area for citations under blockquotes, so I've accomplished that with:

```{css, echo=FALSE}
blockquote {
  border-left: .2px solid #275d38;
  margin: -5px 80px -5px 20px;
  padding-top: -0.5px;
  padding-bottom: -0.5px;
  line-height: 1.35em;
}

.cite {
  margin: -20px 80px -25px 80px; 
  padding-top: -0.5px;
  padding-bottom: -0.5px;
  line-height: 1.25em;
  font-size: 20px;
}
```

which both changes the blockquote parameters and creates a new style for the citation under the quote, so it looks like this:

Thanks to all for the answers and comments.