Using multiple font sizes for code chunks

[pomchip]

Hi

I am using the xaringan package to create slides. I would like to display code chunks using different font sizes on different slides. For the purpose of illustration, I just created a 1-slide code.

---
title: "Size code area"
subtitle: "Because why not"
author: "Mouh"
date: "`r Sys.Date()`"
output: 
  xaringan::moon_reader:
    nature:
      highlightStyle: github
      highlightLines: true
      ratio: "16:9"
    seal: false
---

'''
  Some code that I would like to see in HUGE character
'''

'''
  Some code that I would like to see in tiny characters
'''

(Sorry, I used ' instead of ` because I don't know how to properly insert a markdown in the post editor)

Please, note that, for my real slide deck, I am importing a custom css file which contains among other things:

.remark-slide-content {
  font-size: 28px;
  padding: 20px 80px 20px 80px;
}
.remark-code, .remark-inline-code {
  background: #f0f0f0;
}
.remark-code {
  font-size: 24px;
}
.huge {
  font-size: 200%;
}
.tiny {
  font-size: 50%;
}

Enclosing my code chunks in .huge and .tiny don't see to do much.

Any ides would be greatly appreciated?

[Yarnabrina]

I've not tried myself, but the following posts may be relevant.

Code chunk font size in Rmarkdown with knitr and latex

Font size of code

[pomchip]

Thanks. These links describes the approach to use for setting font size for code blocks globally, which I already used in my css.
I wonder if there is a way to differentiate code chunks using different css classes.

[SamanthaToet]

This doesn't 100% answer your question, but a quick no-CSS workaround that I've used is to treat the content of the slides like headers. That way you can use the different header levels to adjust size and you can also use placement like centering for more emphasis.

For example:

# This text is much bigger 

### Than this text 

and

class: center, middle

# This text is large and in the center of the slide 

This isn't necessarily best practice, but it's a quick fix for now while you dive into more CSS and HTML options. Hope it helps!

[jdb]

You can accomplish what you want with some modification to your css and code chunk

---
title: "Size code area"
subtitle: "Because why not"
author: "Mouh"
date: "`r Sys.Date()`"
output: 
  xaringan::moon_reader:
    nature:
      highlightStyle: github
      highlightLines: true
      ratio: "16:9"
    seal: false
---

```{css, echo = FALSE}
.remark-slide-content {
  font-size: 28px;
  padding: 20px 80px 20px 80px;
}
.remark-code, .remark-inline-code {
  background: #f0f0f0;
}
.remark-code {
  font-size: 24px;
}
.huge .remark-code { /*Change made here*/
  font-size: 200% !important;
}
.tiny .remark-code { /*Change made here*/
  font-size: 50% !important;
}
```

---
# Get Started

Wrap your code chunks with the css class you prefer 

.huge[
```{r}
# Some code that I would like to see in HUGE character
head(mtcars)
```
]
---

# Hello World

.tiny[
```{r}
# Some code that I would like to see in tiny characters
head(mtcars)
```
]

[pomchip]

Thanks @jdb. That's great!