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演示代码折叠

回答

相关问题