如何在Quarto RevealJS特定幻灯片调整代码块与输出尺寸?
解决Quarto RevealJS幻灯片代码块宽度与输出大小问题
一、增大特定幻灯片的代码块宽度
由于你使用了output-location: column-fragment,默认列布局会限制内容宽度,可通过以下两种方式调整:
1. 全局自定义CSS+幻灯片类名
修改YAML头部,引入自定义CSS文件:
format: revealjs: slideNumber: true self-contained: true css: custom.css
创建custom.css文件,写入样式规则:
/* 针对标记为wide-code的幻灯片,扩展代码块宽度 */ .wide-code .reveal .slides section .column-fragment pre { width: 100% !important; overflow-x: hidden; } .wide-code .reveal .slides section .column-fragment { width: 90% !important; /* 充分利用右侧富余空间 */ }
给需要调整的幻灯片添加类名:
## Slide_5 {.wide-code}
2. 幻灯片内嵌CSS(无需额外文件)
直接在目标幻灯片顶部添加内嵌样式,精准定位到指定代码块所在的幻灯片:
## Slide_5 <style> .reveal .slides section:has(#my_chunk_5_ftable_to_flextable) .column-fragment pre { width: 100% !important; overflow-x: hidden; } .reveal .slides section:has(#my_chunk_5_ftable_to_flextable) .column-fragment { width: 90% !important; } </style>
二、放大输出内容(以flextable为例)
1. 调整flextable自身尺寸与字体
在生成表格时直接设置宽度和字体大小,让表格填满容器:
final <- ftable(M) %>% ftable_to_flextable() %>% set_table_width(width = 1, unit = "npc") %>% # 占满容器宽度 fontsize(size = 14, part = "all") %>% # 全局放大字体 autofit() # 自动适配布局
2. 输出容器整体缩放
如果需要进一步放大整个输出区域(包括代码和结果),给代码块添加class-output标记:
#| class-output: enlarged-output
搭配内嵌CSS调整缩放比例:
.enlarged-output { transform: scale(1.2); /* 按需调整放大倍数 */ transform-origin: top left; /* 从左上角开始放大,避免溢出 */ }
完整修改示例(Slide_5)
## Slide_5 {.wide-code} <style> .reveal .slides section:has(#my_chunk_5_ftable_to_flextable) .column-fragment pre { width: 100% !important; overflow-x: hidden; } .reveal .slides section:has(#my_chunk_5_ftable_to_flextable) .column-fragment { width: 90% !important; } .enlarged-output { transform: scale(1.2); transform-origin: top left; } </style> ```{r} #| label: my_chunk_5_ftable_to_flextable #| tbl-cap: Description of my flextable #| output-location: column-fragment #| class-output: enlarged-output final <- ftable(M) %>% ftable_to_flextable() %>% set_table_width(width = 1, unit = "npc") %>% fontsize(size = 14, part = "all") %>% autofit() final
内容的提问来源于stack exchange,提问作者Andrzej Andrzej
相关产品推荐
相关产品推荐

