目录：
完全控制应该折叠哪些块
折叠包含多于一行代码/输出的所有块
1。完全控制应该折叠哪些块
我也想拥有相同的功能并做了以下事情：
我创建了一个如下所示的 JavaScript：
$(document).ready(function() {
$chunks = $('.fold');
$chunks.each(function () {
// add button to source code chunks
if ( $(this).hasClass('s') ) {
$('pre.r', this).prepend("<div class=\"showopt\">Show Source</div><br style=\"line-height:22px;\"/>");
$('pre.r', this).children('code').attr('class', 'folded');
}
// add button to output chunks
if ( $(this).hasClass('o') ) {
$('pre:not(.r)', this).has('code').prepend("<div class=\"showopt\">Show Output</div><br style=\"line-height:22px;\"/>");
$('pre:not(.r)', this).children('code:not(r)').addClass('folded');
// add button to plots
$(this).find('img').wrap('<pre class=\"plot\"></pre>');
$('pre.plot', this).prepend("<div class=\"showopt\">Show Plot</div><br style=\"line-height:22px;\"/>");
$('pre.plot', this).children('img').addClass('folded');
}
});
// hide all chunks when document is loaded
$('.folded').css('display', 'none')
// function to toggle the visibility
$('.showopt').click(function() {
var label = $(this).html();
if (label.indexOf("Show") >= 0) {
$(this).html(label.replace("Show", "Hide"));
} else {
$(this).html(label.replace("Hide", "Show"));
}
$(this).siblings('code, img').slideToggle('fast', 'swing');
});
});
由于我不是 JS 破解者，它可能并不完美，但它做了它应该做的事情。
将其包含在您的 Rmd 文件中：
<script src="js/hideOutput.js"></script>
我还写了一些 CSS 定义来设置按钮的样式：
.showopt {
background-color: #004c93;
color: #FFFFFF;
width: 100px;
height: 20px;
text-align: center;
vertical-align: middle !important;
float: right;
font-family: sans-serif;
border-radius: 8px;
}
.showopt:hover {
background-color: #dfe4f2;
color: #004c93;
}
pre.plot {
background-color: white !important;
}
在同时包含 JS 文件和样式表之后，您可以通过使用以下类之一在它们周围包裹一个 div 容器来隐藏块：
仅隐藏输出
<div class="fold o">
```{r}
...
```
</div>
隐藏源代码
<div class="fold s">
```{r}
...
```
</div>
两者都隐藏
<div class="fold s o">
```{r}
...
```
</div>
脚本检测每个块的类型（例如源代码、文本输出或绘图输出）并相应地标记按钮。
结果如下：
2。折叠包含多于一行代码/输出的所有块
这是一个脚本版本，它将折叠功能添加到所有超过一行的块中：
$(document).ready(function() {
$plots = $('img.plot');
$chunks = $('pre').has('code');
$chunks = $chunks.filter(function(idx) {
return $(this).children('code').outerHeight(false) > parseInt($(this).css('line-height'));
});
$chunks.each(function () {
if($(this).hasClass('r')) {
$(this).append("<div class=\"showopt\">Show Source</div><br style=\"line-height:22px;\"/>");
} else {
$(this).append("<div class=\"showopt\">Show Output</div><br style=\"line-height:22px;\"/>");
}
});
$plots.each(function () {
$(this).wrap('<pre class=\"plot\"></pre>');
$(this).parent('pre.plot').prepend("<div class=\"showopt\">Show Plot</div><br style=\"line-height:22px;\"/>");
});
// hide all chunks when document is loaded
$chunks.children('code').toggle();
$('pre.plot').children('img').toggle();
// function to toggle the visibility
$('.showopt').click(function() {
var label = $(this).html();
if (label.indexOf("Show") >= 0) {
$(this).html(label.replace("Show", "Hide"));
} else {
$(this).html(label.replace("Hide", "Show"));
}
$(this).siblings('code, img').slideToggle('fast', 'swing');
});
});
只需将它包含在<script src="js/hideAll.js"></script> 中，您就不需要将 div 容器包装在代码块周围。
您必须在 Rmd 文档中添加的一件事是以下全局块选项：
```{r, echo = F}
knitr::opts_chunk$set(out.extra = 'class="plot"')
```
需要识别图形输出。