3

I am using quarto to make slides based on revealjs. I can not find options that can change code block height and width in the Guide.

In the example beleow maybe we can set like this although it is a wrong way.

```{r code_block code-block-width="135px" code-block-height="200px"}
some code here
```

An example is below.

---
title: "Untitled"
format: revealjs
editor: visual
---

## 
text text text text text

::: columns 

::: {.column width="50%"}
```{r code_block}
#| eval: false
#| echo: true

some code here
```
:::

::: {.column width="50%"}

```{r}
a = 1
b = 2
plot(a, b)
```

```{r}
a = 1
b = 2
plot(a, b)
```

:::
:::
shafee
  • 15,566
  • 3
  • 19
  • 47
zhiwei li
  • 1,635
  • 8
  • 26

2 Answers2

4

You can use chunk option class-source and classes to do this.

Define css classes with height width as you need and then assign these classes to both the chunk options class-source and classes to have specific height & width for that source code chunk.


---
title: "Untitled"
format: revealjs
editor: visual
---


```{css, echo=FALSE}
.my_class1 {
height: 200px;
width: 100px;
}

.my_class2 {
height: 100px;
width: 200px;
}
```



## text text text text text

::: columns 

::: {.column width="50%"}


#### larger height and samller width

```{r}
#| eval: false
#| echo: true
#| class-source: my_class1
#| classes: my_class1

"some code here"
```

#### samller height with larger width


```{r}
#| eval: false
#| echo: true
#| class-source: my_class2
#| classes: my_class2

"some more code here"
"some more code here"

```

:::

::: {.column width="50%"}

```{r}
a = 1
b = 2
plot(a, b)
```

```{r}
a = 1
b = 2
plot(a, b)
```

:::
:::

code block with different height width

shafee
  • 15,566
  • 3
  • 19
  • 47
1

I can propose this solution:

---
title: "Untitled"
format: revealjs
editor: visual
---

<style>

.code_block1 {
  height: 200px;
  width: 300px;
  background-color: #FF6F61 !important;
  border:1px; 
  border-style:solid;
  font: italic 1.5em "Comic Sans";
}

</style>

## 
Code block is under the title

::: columns 
::: {.column width="50%"}
<pre>
  <code class = "code_block1">
 Coding is fun
 Coding is fun
 Coding is fun
  </code>
</pre>
:::

::: {.column width="50%"}
```{r}
a = 1
b = 2
plot(a, b)
```

```{r}
a = 1
b = 2
plot(a, b)
```
:::
:::

enter image description here

manro
  • 3,529
  • 2
  • 9
  • 22