how to change code block height and width in quarto presentation

[lizhiwei1994]

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)
    ```
    
    :::
    :::    

[melissavanbussel]

One way to achieve this would be to include a custom css file, and then edit the height and width there.

Contents of .qmd file:

---
title: "Untitled"
format: revealjs
editor: visual
css: style.css
---

## Code

When you click the **Render** button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
#| echo: true
#| eval: false
1 + 1
```  

In the style.css file:

.reveal pre.sourceCode code {
	height: 200px;
}

Rendering the file results in the following:

[DaniMori]

This seems to work for python but not R chunks, and only for the height, not the background 😞

[mcanouil]

Any reproducible example showing that it's not working?
Note that even if the above does not work as is, the same principle apply, so you could still use your browser to make the right CSS rule.

[cscheid]

This is a Quarto bug - the id used in code cell outputs is not consistent from Jupyter to knitr.

[mcanouil]

Here, following knitr documentation, here is one way amongst many:

Input	Output
--- format: revealjs execute: eval: true echo: true include-in-header: - text: | <style> #my-code pre.sourceCode { height: 150px; background: #b22222; } </style> --- ## Slide 1 ```{r} #| attr-source: "id=my-code" print("Hello, World!") ``` Some text ```{r} #| attr-source: "id=not-my-code" print("Hello, World!") ```

[DaniMori]

Any reproducible example showing that it's not working? Note that even if the above does not work as is, the same principle apply, so you could still use your browser to make the right CSS rule.

Sorry, didn't provide a Reprex bc I just attempted the exact same doc but changing the chunks to R instead of Python.

But the latter solution worked, yay!! (Only, just for the height for me, as in the case with Python)

[camilogarciabotero]

There is an alternative if you want to make the code chunk and output side by side:

#| output-location: column-fragment
#| echo: true

penguins |>
  filter(species == "Adelie") |>
  select(species, island, sex)

[mcanouil]

FYI

• Block Code with revealjs #4943