You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Quarto RevealJS演示文稿中调整代码块的高宽

解决Quarto RevealJS幻灯片中代码块宽高调整问题

Quarto RevealJS没有直接提供code-block-width或code-block-height这类属性来调整代码块尺寸,但可以通过内联样式包裹或自定义CSS实现需求:

1. 调整代码块宽度

单块代码精准调整(内联样式)

在目标代码块外层嵌套一个带width样式的容器,即可单独控制该代码块的宽度:

::: {style="width: 135px; margin: 0 auto;"}
```{r code_block}
#| eval: false
#| echo: true
some code here

:::

### 全局统一调整(自定义CSS)
如果需要批量调整所有代码块宽度,可在YAML配置中引入自定义CSS文件:
```yaml
---
title: "Untitled"
format:
  revealjs:
    css: custom.css
editor: visual
---

然后在custom.css文件中添加全局样式:

.reveal pre code {
  width: 80%; /* 按需修改全局代码块宽度 */
}

2. 调整代码块高度(带滚动条)

当代码内容过长时,可设置固定高度并开启垂直滚动,避免内容溢出幻灯片:

::: {style="height: 200px; overflow-y: auto;"}
```{r code_block}
#| eval: false
#| echo: true
some code here
some more code here
another line of code
one more line

:::

## 修改后的完整示例代码
```markdown
---
title: "Untitled"
format: revealjs
editor: visual
---

## 
text text text text text

::: columns 

::: {.column width="50%"}
::: {style="width: 135px; height: 200px; overflow-y: auto;"}
```{r code_block}
#| eval: false
#| echo: true

some code here
some more code here
another line of code
one more line

:::
:::

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

a = 1
b = 2
plot(a, b)
a = 1
b = 2
plot(a, b)

:::
:::

内容的提问来源于stack exchange,提问作者zhiwei li
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.21 16:06:25