我能够成功地将@SébastienRochette 在这篇StacOverflow 帖子中提出的解决方案付诸实践，在 bookdown 书籍中向 R、Python 和 Bash 代码块添加显示/隐藏按钮。它工作得很好，还允许您自定义块和按钮的背景颜色。
我不满意的一件事是我必须为我使用的每种语言复制 Javascript 代码。因此，我在codefolding.js中的代码如下所示：
window.initializeCodeFolding = function(show) {
// handlers for show-all and hide all
$("#rmd-show-all-code").click(function() {
// close the dropdown menu when an option is clicked
$("#allCodeButton").dropdown("toggle");
// R show code
$('div.r-code-collapse').each(function() {
$(this).collapse('show');
});
// Python show code
$('div.py-code-collapse').each(function() {
$(this).collapse('show');
});
// Bash show code
$('div.sh-code-collapse').each(function() {
$(this).collapse('show');
});
});
$("#rmd-hide-all-code").click(function() {
// close the dropdown menu when an option is clicked
$("#allCodeButton").dropdown("toggle");
// Hide R code
$('div.r-code-collapse').each(function() {
$(this).collapse('hide');
});
// Hide Python code
$('div.py-code-collapse').each(function() {
$(this).collapse('hide');
});
// Hide Bash code
$('div.sh-code-collapse').each(function() {
$(this).collapse('hide');
});
});
// index for unique code element ids
var r_currentIndex = 1; // for R code
var py_currentIndex = 1; // for Python code
var sh_currentIndex = 1; // for shell code
// select Python chunks
var pyCodeBlocks = $('pre.python');
pyCodeBlocks.each(function() {
// create a collapsable div to wrap the code in
var div = $('<div class="collapse py-code-collapse"></div>');
if (show)
div.addClass('in');
var id = 'pycode-643E0F36' + py_currentIndex++;
div.attr('id', id);
// "this" refers the code chunk
$(this).before(div);
$(this).detach().appendTo(div);
$(this).css('background-color','#ebfaeb'); // change color of chunk background
// add a show code button right above
var showCodeText = $('<span>' + (show ? 'Hide Python code' : 'Python code') + '</span>');
var showCodeButton = $('<button type="button" class="btn btn-default btn-xs code-folding-btn pull-right"></button>');
showCodeButton.append(showCodeText);
showCodeButton
.attr('data-toggle', 'collapse')
.attr('data-target', '#' + id)
.attr('aria-expanded', show)
.attr('aria-controls', id);
// change the background color of the button
showCodeButton.css('background-color','#009900');
var buttonRow = $('<div class="row"></div>');
var buttonCol = $('<div class="col-md-12"></div>');
buttonCol.append(showCodeButton);
buttonRow.append(buttonCol);
div.before(buttonRow);
// update state of button on show/hide
div.on('hidden.bs.collapse', function () {
showCodeText.text('Python code');
});
div.on('show.bs.collapse', function () {
showCodeText.text('Hide Python code');
});
});
// select Bash shell chunks
var shCodeBlocks = $('pre.bash');
shCodeBlocks.each(function() {
// create a collapsable div to wrap the code in
var div = $('<div class="collapse sh-code-collapse"></div>');
if (show)
div.addClass('in');
var id = 'shcode-643E0F36' + sh_currentIndex++;
div.attr('id', id);
// "this" refers the code chunk
$(this).before(div);
$(this).detach().appendTo(div);
$(this).css('background-color','#A0A0A0'); // change color of chunk background
// add a show code button right above
var showCodeText = $('<span>' + (show ? 'Hide Bash code' : 'Bash code') + '</span>');
var showCodeButton = $('<button type="button" class="btn btn-default btn-xs code-folding-btn pull-right"></button>');
showCodeButton.append(showCodeText);
showCodeButton
.attr('data-toggle', 'collapse')
.attr('data-target', '#' + id)
.attr('aria-expanded', show)
.attr('aria-controls', id);
// change the background color of the button
showCodeButton.css('background-color','#cc7a00');
var buttonRow = $('<div class="row"></div>');
var buttonCol = $('<div class="col-md-12"></div>');
buttonCol.append(showCodeButton);
buttonRow.append(buttonCol);
div.before(buttonRow);
// update state of button on show/hide
div.on('hidden.bs.collapse', function () {
showCodeText.text('Bash code');
});
div.on('show.bs.collapse', function () {
showCodeText.text('Hide Bash code');
});
});
// select all R code blocks
// var rCodeBlocks = $('pre.sourceCode, pre.r, pre.bash, pre.sql, pre.cpp, pre.stan');
// adding pre.sourceCode confuses the Python button
var rCodeBlocks = $('pre.r, pre.sql, pre.cpp, pre.stan');
rCodeBlocks.each(function() {
// create a collapsable div to wrap the code in
var div = $('<div class="collapse r-code-collapse"></div>');
if (show)
div.addClass('in');
var id = 'rcode-643E0F36' + r_currentIndex++;
div.attr('id', id);
$(this).before(div);
$(this).detach().appendTo(div);
$(this).css('background-color','#e6faff'); // change color of chunk background
// add a show code button right above
var showCodeText = $('<span>' + (show ? 'Hide R code' : 'R code') + '</span>');
var showCodeButton = $('<button type="button" class="btn btn-default btn-xs code-folding-btn pull-right"></button>');
showCodeButton.append(showCodeText);
showCodeButton
.attr('data-toggle', 'collapse')
.attr('data-target', '#' + id)
.attr('aria-expanded', show)
.attr('aria-controls', id);
// change the background color of the button
showCodeButton.css('background-color','#0000ff');
var buttonRow = $('<div class="row"></div>');
var buttonCol = $('<div class="col-md-12"></div>');
buttonCol.append(showCodeButton);
buttonRow.append(buttonCol);
div.before(buttonRow);
// update state of button on show/hide
div.on('hidden.bs.collapse', function () {
showCodeText.text('R code');
});
div.on('show.bs.collapse', function () {
showCodeText.text('Hide R code');
});
});
}
工作解决方案是Minimal rTorch Book的一部分，可以在这里在线阅读，它的GitHub 存储库在这里。
它的工作方式bookdown是编写一个 R 脚本hide_code.R，它将 Javascript 代码和 CSS 作为标题附加到Rmd来自_output.yml.
bookdown::gitbook:
#dev: svglite # in case I need svg images
includes:
in_header: hide_code.html
knitr我很少使用 Javascript，我想知道您将如何修改此代码以提供基于 knitr 块内使用的引擎识别的多种语言。
笔记。我附上了
knitr应用此隐藏/显示按钮后块外观的屏幕截图。
