在R的bs4_book中如何让代码块的.pre-scrollable类在HTML中生效？

你遇到的问题是因为bs4_book使用downlit处理代码高亮时，不会把knitr设置的class.source传递到最终的<pre>标签上。这里有两种可行的解决方法：

方法一：自定义CSS（推荐，最简单） #

不用依赖Bootstrap的pre-scrollable类，直接给代码块设置滚动样式。

1. 在项目根目录创建一个style.css文件，写入以下内容：

/* 限制代码块最大高度，超出部分垂直滚动 */
.book .sourceCode pre {
  max-height: 300px; /* 可根据需求调整高度 */
  overflow-y: auto;
}

2. 在_bookdown.yml配置文件中添加（没有的话就新建这个文件）：

css: style.css

重新渲染书籍，所有代码块就会自动出现滚动效果。

方法二：修改knitr钩子，手动添加类 #

如果一定要用Bootstrap的pre-scrollable类，可以通过自定义knitr钩子修改生成的HTML：

替换原setup代码块的内容：

knitr::opts_chunk$set(echo = TRUE)

# 自定义source钩子，给pre标签添加pre-scrollable类
knitr::knit_hooks$set(source = function(x, options) {
  # 先让knitr正常处理代码高亮
  x <- knitr:::hilight_source(x, options)
  # 替换pre标签的class，加入pre-scrollable
  x <- gsub('<pre class="downlit sourceCode', '<pre class="downlit sourceCode pre-scrollable', x)
  return(x)
})

渲染后，<pre>标签就会带上pre-scrollable类，Bootstrap的样式即可生效。

补充说明 #

原来的class.source = "pre-scrollable"无效，是因为downlit在把Markdown代码块转换为HTML时，会忽略代码块声明里的额外类，而是生成自己的结构（用div.sourceCode包裹pre.downlit），所以需要通过上述两种方法干预最终的HTML结构或样式。

内容的提问来源于stack exchange，提问作者GaryDe