Как добавить сворачивание кода для вывода фрагментов в html-документах rmarkdown

TOC:

1. полный контроль над тем, какие блоки должны быть сложены

2. сложите все куски, содержащие более одной строки кода / вывода

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 crack, это может быть не идеально, но он делает то, что должен. Включите его в свой файл 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, - это следующая глобальная опция chunk:

```{r, echo = F}
knitr::opts_chunk$set(out.extra = 'class="plot"')
```

это необходимо для идентификации графического вывода.