如何在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
相关产品推荐
相关产品推荐

