html code-folding (1)

पूरे पृष्ठ के लिए ग्लोबल हाईड / शो बटन

HTML आउटपुट में सभी कोड को मोड़ने वाले बटन के लिए @ Yihui के संकेत का उपयोग करने के लिए, आपको निम्न कोड को बाहरी फ़ाइल में पेस्ट करना होगा (मैंने इसे header.html का नाम दिया है header.html यहां):

संपादित करें: मैंने फ़ंक्शन को toggle_R संशोधित किया ताकि बटन उस पर क्लिक करने पर Hide Global या Show Global हो।

<script type="text/javascript">

// toggle visibility of R source blocks in R Markdown output
function toggle_R() {
  var x = document.getElementsByClassName('r');
  if (x.length == 0) return;
  function toggle_vis(o) {
    var d = o.style.display;
    o.style.display = (d == 'block' || d == '') ? 'none':'block';
  }

  for (i = 0; i < x.length; i++) {
    var y = x[i];
    if (y.tagName.toLowerCase() === 'pre') toggle_vis(y);
  }

    var elem = document.getElementById("myButton1");
    if (elem.value === "Hide Global") elem.value = "Show Global";
    else elem.value = "Hide Global";
}

document.write('<input onclick="toggle_R();" type="button" value="Hide Global" id="myButton1" style="position: absolute; top: 10%; right: 2%; z-index: 200"></input>')

</script>

इस स्क्रिप्ट में, आप सीधे style विकल्पों के साथ बटन से संबंधित स्थिति और सीएसएस कोड को संशोधित करने या इसे अपनी सीएसएस फ़ाइल में जोड़ने में सक्षम हैं। मुझे z-index को उच्च मूल्य पर सेट करना था ताकि यह सुनिश्चित हो सके कि यह अन्य डिवीजनों पर दिखाई देता है।
ध्यान दें कि इस जावास्क्रिप्ट कोड को केवल R कोड को echo=TRUE फोल्ड किया जाता है, जिसे html में एक class="r" के लिए जिम्मेदार ठहराया गया है। इसे कमांड var x = document.getElementsByClassName('r'); द्वारा परिभाषित किया गया है var x = document.getElementsByClassName('r');

फिर, आप इस फ़ाइल को अपनी रेकॉर्डड स्क्रिप्ट के YAML हेडर में कहते हैं, जैसा कि नीचे दिए गए उदाहरण में है:

---
title: "Toggle R code"
author: "StatnMap"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
  bookdown::html_document2:
    includes:
      in_header: header.html
  bookdown::gitbook:
    includes:
      in_header: header.html
---

Stackoverflow question
<https://stackoverflow.com/questions/45360998/code-folding-in-bookdown>

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

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

नया संपादित करें: प्रत्येक ठोक के लिए स्थानीय छिपाएँ / शो बटन

मैं अंत में हल मिल गया!
सामान्य HTML आउटपुट (कोई बुकडाउन) के लिए कोड तह व्यवहार को देखते हुए, मैं इसे बुकडाउन में जोड़ने में सक्षम था। मुख्य जावास्क्रिप्ट फ़ंक्शन को .sourceCode साथ काम करने के लिए .sourceCode क्लास डिवीजनों को खोजने की आवश्यकता है। हालाँकि, इसके लिए bootstrap पूरक जावास्क्रिप्ट कार्यों की भी आवश्यकता होती है, लेकिन सभी की नहीं। यह gitbook और html_document2 साथ काम करता है।
यहाँ कदम हैं:

1. अपनी Rmd फ़ाइल की तुलना में एक ही निर्देशिका में एक js फ़ोल्डर बनाएँ
2. उदाहरण के लिए javascript फ़ंक्शंस को डाउनलोड करें। js और collapse.js । js यहां: https://github.com/twbs/bootstrap/tree/v3.3.7/js और उन्हें अपने js फ़ोल्डर में संग्रहीत करें
3. निम्नलिखित कोड के साथ कोड codefolding.js नामक js फ़ोल्डर में एक नई फ़ाइल बनाएं। यह rmarkdown code_folding विकल्प के लिए समान है, लेकिन R कोड को खोजने के लिए pre.sourceCode साथ जोड़ा गया है:

codefolding.js कोड:

window.initializeCodeFolding = 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 = 1;

  // select all R code blocks
  var rCodeBlocks = $('pre.sourceCode, pre.r, pre.python, pre.bash, 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' + 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');
    });
  });

}

4. निम्नलिखित रेकॉर्डिंग स्क्रिप्ट में, सभी तीन फ़ंक्शंस पढ़े और शामिल किए गए हैं जैसा कि हेडर में है, ताकि js फ़ोल्डर अंतिम दस्तावेज़ के लिए उपयोगी न हो। Js फ़ंक्शन पढ़ते समय, मैंने डिफ़ॉल्ट रूप से कोड ब्लॉक show का विकल्प भी जोड़ा, लेकिन आप उन्हें hide साथ hide का विकल्प चुन सकते हैं।

रेकॉर्ड कोड:

---
title: "Toggle R code"
author: "StatnMap"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
  bookdown::html_document2:
    includes:
      in_header: header.html
  bookdown::gitbook:
    includes:
      in_header: header.html
---

Stackoverflow question
<https://stackoverflow.com/questions/45360998/code-folding-in-bookdown>


```{r setup, include=FALSE}
# Add a common class name for every chunks
knitr::opts_chunk$set(
  echo = TRUE)
```
```{r htmlTemp3, echo=FALSE, eval=TRUE}
codejs <- readr::read_lines("js/codefolding.js")
collapsejs <- readr::read_lines("js/collapse.js")
transitionjs <- readr::read_lines("js/transition.js")

htmlhead <- 
  paste('
<script>',
paste(transitionjs, collapse = "\n"),
'</script>
<script>',
paste(collapsejs, collapse = "\n"),
'</script>
<script>',
paste(codejs, collapse = "\n"),
'</script>
<style type="text/css">
.code-folding-btn { margin-bottom: 4px; }
.row { display: flex; }
.collapse { display: none; }
.in { display:block }
</style>
<script>
$(document).ready(function () {
  window.initializeCodeFolding("show" === "show");
});
</script>
', sep = "\n")

readr::write_lines(htmlhead, path = "header.html")
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

```{r plot}
plot(cars)
```

यह स्क्रिप्ट Rstudio ब्राउज़र में बटन दिखाती है, लेकिन अच्छी तरह से काम नहीं करती है। हालाँकि, यह फ़ायरफ़ॉक्स के साथ ठीक है।
आप देखेंगे कि इस कोड में थोड़ी css है, लेकिन निश्चित रूप से आप स्थिति और रंग को संशोधित कर सकते हैं और आप इन बटन पर कुछ और सीएसएस के साथ चाहें।

संपादित करें: वैश्विक और स्थानीय बटन मिलाएं

2017-11-13 को संपादित करें: वैश्विक कोड-फोल्डिंग बटन अच्छी तरह से व्यक्तिगत ब्लॉक बटन के साथ एकीकृत है। फ़ंक्शन toggle_R अंत में आवश्यक नहीं है, लेकिन आपको बूटस्ट्रैप में फ़ंक्शन dropdown.js प्राप्त करने की आवश्यकता है।

js फ़ाइलों को कॉल करते समय ग्लोबल बटन को सीधे कोड चंक में कहा जाता है:

```{r htmlTemp3, echo=FALSE, eval=TRUE}
codejs <- readr::read_lines("/mnt/Data/autoentrepreneur/js/codefolding.js")
collapsejs <- readr::read_lines("/mnt/Data/autoentrepreneur/js/collapse.js")
transitionjs <- readr::read_lines("/mnt/Data/autoentrepreneur/js/transition.js")
dropdownjs <- readr::read_lines("/mnt/Data/autoentrepreneur/js/dropdown.js")

htmlhead <- c(
  paste('
<script>',
paste(transitionjs, collapse = "\n"),
'</script>
<script>',
paste(collapsejs, collapse = "\n"),
'</script>
<script>',
paste(codejs, collapse = "\n"),
'</script>
<script>',
paste(dropdownjs, collapse = "\n"),
'</script>
<style type="text/css">
.code-folding-btn { margin-bottom: 4px; }
.row { display: flex; }
.collapse { display: none; }
.in { display:block }
.pull-right > .dropdown-menu {
    right: 0;
    left: auto;
}
.open > .dropdown-menu {
    display: block;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
</style>
<script>
$(document).ready(function () {
  window.initializeCodeFolding("show" === "show");
});
</script>
', sep = "\n"),
  paste0('
<script>
document.write(\'<div class="btn-group pull-right" style="position: absolute; top: 20%; right: 2%; z-index: 200"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-_extension-text-contrast=""><span>Code</span> <span class="caret"></span></button><ul class="dropdown-menu" style="min-width: 50px;"><li><a id="rmd-show-all-code" href="#">Show All Code</a></li><li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li></ul></div>\')
</script>
')
)

readr::write_lines(htmlhead, path = "/mnt/Data/autoentrepreneur/header.html")
```

नया वैश्विक बटन "सभी कोड दिखाएं" या "सभी कोड छिपाएं" के बीच चयन करने के लिए ड्रॉपडाउन मेनू दिखाता है। window.initializeCodeFolding("show" === "show") का उपयोग करके सभी कोड डिफ़ॉल्ट रूप से दिखाए जाते हैं, जबकि window.initializeCodeFolding("show" === "hide") का उपयोग करते हुए, सभी कोड डिफ़ॉल्ट रूप से छिपे होते हैं।