r रेकॉर्डडाउन html डॉक्युमेंट्स में आउटपुट चंक्स में कोड फोल्डिंग कैसे जोड़ें




r-markdown (3)

मैंने सीधे जावास्क्रिप्ट को दूसरे रेकॉर्डड दस्तावेज़ के स्रोत से कॉपी किया, जहां मैंने code_folding: show सेट किया। मैंने javascript को py_code_folding.js रूप में py_code_folding.js और अपने Rmarkdown दस्तावेज़ के शीर्ष पर <script src="py_code_folding.js"></script> जोड़ा। केवल सीमा यह है कि मुझे अपनी जावास्क्रिप्ट में हार्डकोड करना था कि क्या मैं चाहता हूं कि ब्लॉक शुरू में दिखाए जाएं या छिपे हों।

window.initializePythonCodeFolding = function(show) {

  // handlers for show-all and hide all
  $("#rmd-show-all-code").click(function() {
    $('div.r-code-collapse').each(function() {
      $(this).collapse('show');
    });
  });
  $("#rmd-hide-all-code").click(function() {
    $('div.r-code-collapse').each(function() {
      $(this).collapse('hide');
    });
  });

  // index for unique code element ids
  var currentIndex = 10000;

  // select all R code blocks
  var rCodeBlocks = $('pre.python');
  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' + currentIndex++;
    div.attr('id', id);
    $(this).before(div);
    $(this).detach().appendTo(div);

    // add a show code button right above
    var showCodeText = $('<span>' + (show ? 'Hide' : '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);

    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('Code');
    });
    div.on('show.bs.collapse', function () {
      showCodeText.text('Hide');
    });
  });

}

$(document).ready(function () {
  window.initializePythonCodeFolding("show" === "show");
});

मैं वास्तव में RMarkdown में "code_folding" सुविधा की सराहना करता हूं। हालाँकि, जो मुझे वास्तव में चाहिए वह है कोड को हर समय दिखाना और आउटपुट पर डिस्प्ले को टॉगल करना।

---
title: "test file"
author: "dayne"
date: "June 10, 2016"
output: 
  html_document:
    code_folding: hide
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

Here is a basic example.

```{r}
3 + 4
```

क्या कोड के बजाय आउटपुट को टॉगल करने का एक तरीका है? मैंने जो सबसे अच्छा (लेकिन आदर्श नहीं) समाधान सोचा है, वह है चंक्स में collapse=TRUE जोड़ना, लेकिन फिर कोड और आउटपुट अभी भी एक ही समय में प्रदर्शित होते हैं।

संकलित दस्तावेज़ के लिए लिंक: http://rpubs.com/daynefiler/188408


एक सेक्शन को टॉगल करने के लिए एक त्वरित तरीका है (जरूरी कोड नहीं):

अपनी .Rmd फ़ाइल में <div class="toggle"><button>TOGGLE_TEXT</button> और <\div> साथ टॉगल करने के लिए वर्गों को संलग्न करें।

1. How many users are in the second, but not the first, user table?

    <div class="toggle"><button>Solution</button>
    ```{r}
    setdiff(user2, user) %>% nrow()
    ```
    </div>

इसे .Rmd फ़ाइल के नीचे रखें (या आदर्श रूप से .js फ़ाइल में आपके सभी पृष्ठों से जुड़ा हुआ है)।

<script>
  $(".toggle").click(function() {
    $(this).toggleClass("open");
  });
</script>

इसे अपनी .css फ़ाइल में रखें (आपको अपने बटन के लिए ऊंचाई के साथ खेलना होगा)।

.toggle {
  height: 1.55em;
  overflow-y: hidden;
}
.toggle.open {
  height: auto;
}

टीओसी:

  1. पूर्ण नियंत्रण जिस पर विराम लगना चाहिए

  2. उन सभी विखंडूओं को मोड़ो जिनमें एक से अधिक कोड / आउटपुट हों

1. पूर्ण नियंत्रण जिस पर विराम लगना चाहिए

मैं भी एक ही तरह की कार्यक्षमता रखना चाहता था और निम्नलिखित किया:

मैंने एक जावास्क्रिप्ट बनाया जो इस प्रकार है:

$(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');
  });
});

चूंकि मैं कोई जेएस क्रैक नहीं हूं इसलिए यह सही नहीं हो सकता है, लेकिन यह वही करता है जो इसे माना जाता है। इसे अपनी 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;
}

जेएस फ़ाइल और स्टाइलशीट दोनों को शामिल करने के बाद, आप निम्नलिखित वर्गों में से एक के साथ उनके चारों ओर एक डिव कंटेनर लपेटकर विखंडू को छिपा सकते हैं:

केवल आउटपुट छिपाएँ

<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> और आपको अपने कोड <script src="js/hideAll.js"></script> चारों ओर div कंटेनरों को लपेटने की आवश्यकता नहीं है। हालाँकि, आपको अपने Rmd दस्तावेज़ में एक चीज़ जोड़ना होगा, जो निम्नलिखित वैश्विक विकल्प है:

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

ग्राफिकल आउटपुट की पहचान करना आवश्यक है।