Toggling code cells in Jupyter HTML Outputs
When writing a blog post in Twitter, I found there was no easy way to reproduce the rather lovely code folding effect you get in ( Rmarkdown documents ), so I went and made one myself, illustrated here.
Actually, I've written a few of them, as the code changes slightly depending on where you want to achieve code folding.
First, here's some toggleable code.
for i in range(9, -1, -1): if i > 0: print('.' * (i) + ('%i' % i) + '.' * (9-i)) else: print('>Lift Off!')
.........9 ........8. .......7.. ......6... .....5.... ....4..... ...3...... ..2....... .1........ >Lift Off!
%matplotlib inline import matplotlib.pyplot as plt import numpy as np plt.hist(np.random.normal(0, 1, 100));
Notebooks that have toggling enabled will keep this feature
when you convert them to HTML pages using
I believe that this code could be packaged to create a jupyter extension, but I don't know how, and don't have much interest right now.
It should be possible to create a
jupyter nbconvert that injects the same code,
or something very like it.
Unfortunately, the documentation on how to do this is not straightforward.
To post Jupyter notebooks, I convert them to
.md files using the command
jupyter nbconvert index.ipynb --to markdown --NbConvertApp.output_files_dir=.,
and following the instructions
I've added the following rule to the site header template for my version of the theme,
just before the
I then add
source: jupyter to the metadata of all Jupyter posts.
This means that this code is added to these posts, and only these posts.
Something very similar should work for other static site generators such as Pelican.
Finally, it would be simple to add a Show/Hide All button at the top of the page, but I haven't got around to doing so yet. Soon, maybe.