RMarkdown reveal.js演示代碼摺疊

我正在準備一個RMarkdown reveal.js演示文稿。我希望幻燈片中的R代碼部分在本質上是可摺疊的。RMarkdown reveal.js演示代碼摺疊

我的yaml標題看起來像這樣，但代碼摺疊在最終演示文稿中不可見。

--- 
title: "Untitled" 
output: 
    revealjs::revealjs_presentation: 
    code_folding: hide 

--- 


## R Markdown 

This is an R Markdown presentation. 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. 


## Slide with R Code and Output 

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

## Slide with Plot 

```{r, echo=FALSE} 
plot(cars) 
```

添加code_folding: hide適用於普通RMarkdown文件。

是否code_folding不可用於演示？有沒有其他方法可以嘗試？

來源

2017-08-24 Vasim

我會假設它不是。但是你仍然可以用一些JavaScript創建類似的。也許這會有所幫助：https://stackoverflow.com/a/37839683/1777111 –

謝謝Martin，我曾嘗試過這段代碼，但它似乎只適用於HTML文件，而不是幻燈片。 – Vasim

這是真的。原因是演示文稿的DOM（文檔對象模型）與普通的RMarkdown HTML文檔不同。你將不得不調整一下代碼才能使它工作。 –

我擺弄了一些東西。猜猜這隻適用於源代碼塊，但可以擴展到其他元素。大部分代碼只是從我上面評論中提到的答案中提取的。

完全MRE：

--- 
title: "Untitled" 
output: 
    revealjs::revealjs_presentation: 
    self_contained: true 
--- 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $chunks = $('div.sourceCode'); // get all divs containing source code... 
    // add the button and a wrapping container to each of them... 
    $chunks.each(function() { 
    $(this).prepend('<div class=\"but_con\"><div class=\"showopt\">Show Source</div></div>'); // add the button and a wrapping container to each of them... 
    $(this).find('code').toggle(); // hide them right away... 
    }); 

    // definition of the function to toggle visibility 
    // we select all buttons, and add a click function 
    $('.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).parent().siblings('pre').children('code').slideToggle('fast', 'swing'); 
    }); 

}); 
</script> 


<style> 
div.but_con { 
    margin: auto; 
    width: 90%; 
    padding-bottom: 10px; 
} 

div.showopt { 
    font-size: 35%; 
    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; 
    margin-bottom: 10px; 
} 

.showopt:hover { 
    background-color: #dfe4f2; 
    color: #004c93; 
} 
</style> 

## R Markdown 

This is an R Markdown presentation. 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. 


## Slide with R Code and Output 

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

## Slide with Plot 

```{r, echo=FALSE} 
plot(cars) 
```

來源

2017-08-24 13:22:05

謝謝，它完美地工作。我會嘗試瞭解兩者之間的差異並瞭解原因。 – Vasim

RMarkdown reveal.js演示代碼摺疊

回答

相關問題