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.