Re: [knitr] Option to include [ show | hide ] links in code Rmarkdown chunks

2,064 views
Skip to first unread message

Carl Boettiger

unread,
May 2, 2013, 2:34:26 PM5/2/13
to lian...@gene.com, knitr

Hi Steve,

I have also encountered this issue in my notes, where sometimes I want to refer to the code (was the red line really model 2?) but otherwise it can be in the way. Like you say, this is already straightforward with javascript. The implementation will depend on how the markdown parser renders html code-blocks though, so it is probably best done outside knitr, which in such a workflow just generates the markdown agnostic of how it is parsed.

I have a few examples of such javascript in my notebook; e.g. click "toggle code" on the sidebar: http://carlboettiger.info/2013/04/27/comparison-of-nonparametric-and-parametric-approaches.html

clearly a richer version could be implemented, or collapsing code blocks individually, but I haven't had time to play with it much. Anyway see the javascript and html button if you're interested; and thanks for sharing your thoughts.

Cheers,
Carl



On Mon, Apr 29, 2013 at 5:00 PM, <lian...@gene.com> wrote:
Howdy,

Perhaps a useful idea for the future:

I'm using Rmarkdown more and more to generate reports from different data analyses at different stages of "readiness".

I find that it is helpful to include more code chunks than normal in early/beta versions of an analysis to help facilitate talking through the analysis in something like a lab meeting setting.

While having certain code chunks easily readable is handy to kick ideas around during a presentation, it can sometimes be a bit much. I think it would be handy to include a javascript-powered option to embed `[ show | hide ]` links at the top (or bottom) of code chunks that you could click to alternatively hide a chunk when it is being shown, or expand a hidden chunk.

Not sure how hard that'd be to add, but just something I thought might be handy. I imagine it is "easy enough" to write a post-processing script that reads in the html output from knit-ing an *.Rmd file and decorating it w/ the appropriate javascript if its too onerous to include somewhere in the Rmd -> md -> html workflow.

Just a thought,

-steve

--
You received this message because you are subscribed to the Google Groups "knitr" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knitr+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
Carl Boettiger
UC Santa Cruz
http://carlboettiger.info/

Yihui Xie

unread,
May 12, 2013, 11:34:04 PM5/12/13
to Carl Boettiger, lian...@gene.com, knitr
It is easy to implement
(https://github.com/yihui/knitr/commit/b3c70b94), but believe it or
not, someone (I heard it was Wolfram) has a patent on this...

Regards,
Yihui
--
Yihui Xie <xiey...@gmail.com>
Phone: 515-294-2465 Web: http://yihui.name
Department of Statistics, Iowa State University
2215 Snedecor Hall, Ames, IA

lianogl...@gene.com

unread,
May 13, 2013, 1:57:33 AM5/13/13
to kn...@googlegroups.com, Carl Boettiger, lian...@gene.com
Hi Yihui and Carl,

Thanks for the feedback.

These are both nice.  Yihui: can I get knitr to include this button when compiling Rmd -> md -> html, or do I have to hotwire this in myself?

I was, however, really hoping to be able to toggle each code chunk on/off both globally (as both of these solutions do) as well as individually.

To do the latter, I feel like we would need each <code> block to get its own `id` so they can be grabbed individually as opposed to just having `class="r"` ... that's where the real rub is.

As it is now, I'm just planning on writing a simple script that runs over the final *.html file and outputs a copy that adds such an id using a simple "bean counter", eg. <code class="r" id="code-block-1">...</code> .... <code class="r" id="code-block-2">...</code> etc. so I could then decorate each block w/ its own show/hide link to expand/collapse it individually.

I'm not sure how easy it is to get this to happen during the normal Rmd -> md -> html compiling that knitr does. I suspect both the knitr and markdown packages would need to be modified to get that to work, no?

Anyway, wants this itch becomes annoying enough to scratch, I'll be sure to share my snippet(s) with the group.

Thanks,
-steve

Yihui Xie

unread,
May 13, 2013, 10:43:39 PM5/13/13
to lianogl...@gene.com, kn...@googlegroups.com, Carl Boettiger, lian...@gene.com
Including <script src="toggleR.js"></script> in your R Markdown file
should be OK.

For individual chunks, I think you can also use JavaScript to add an
id to each chunk.

Regards,
Yihui
--
Yihui Xie <xiey...@gmail.com>
Phone: 515-294-2465 Web: http://yihui.name
Department of Statistics, Iowa State University
2215 Snedecor Hall, Ames, IA


Ramnath Vaidyanathan

unread,
May 13, 2013, 11:15:52 PM5/13/13
to kn...@googlegroups.com, lianogl...@gene.com, Carl Boettiger, lian...@gene.com
Since, knitr already labels code chunks, would it not be a good idea to use that as an id? It wont' be possible in markdown, but should be doable in the html version.

Nathan Carter

unread,
Apr 4, 2016, 9:43:30 AM4/4/16
to knitr, lianogl...@gene.com, cboe...@gmail.com, lian...@gene.com

I just found a StackOverflow Q&A that helped me with this issue.

My solution was therefore as follows.  In my Rmd file, before each code block that I want readers to be able to hide/show, I place this line of HTML, which adds a hide/show button:

<input type=button class=hideshow></input>

(Actually, it adds a blank button, but we'll fix that next.)

Then at the end of the Rmd file (just once), I place the following script which sets up each of those buttons:

<script>
$( "input.hideshow" ).each( function ( index, button ) {
  button.value = 'Hide';
  $( button ).click( function () {
    var target = this.nextSibling ? this : this.parentNode;
    target = target.nextSibling.nextSibling;
    if ( target.style.display == 'block' || target.style.display == '' ) {
      target.style.display = 'none';
      this.value = 'Show';
    } else {
      target.style.display = 'block';
      this.value = 'Hide';
    }
  } );
} );
</script>

This works for me inside RStudio, but I haven't tried to make it work in HTML files published from RStudio to be used out on the web.  It is also highly dependent on the particular HTML structure of the knitr output, and is thus unfortunately fragile.

(In other words, a good solution built into knitr would still be far better than this temporary stopgap.)

Nathan

Yihui Xie

unread,
Apr 4, 2016, 12:31:51 PM4/4/16
to Nathan Carter, knitr, lianogl...@gene.com, Carl Boettiger, lian...@gene.com
I have posted a new answer to the SO question you mentioned.

Regards,
Yihui
--
Yihui Xie <xiey...@gmail.com>
Web: http://yihui.name
> --
> You received this message because you are subscribed to the Google Groups
> "knitr" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to knitr+un...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

Carter, Nathan

unread,
Apr 4, 2016, 1:01:06 PM4/4/16
to Yihui Xie, Nathan Carter, knitr, lianogl...@gene.com, Carl Boettiger, lian...@gene.com

Wow, the page you linked to (for convenience: http://rmarkdown.rstudio.com/html_document_format.html#code_folding) is full of tons of great information -- thank you!

Nathan
Reply all
Reply to author
Forward
0 new messages