damianavila / RISE

RISE: "Live" Reveal.js Jupyter/IPython Slideshow Extension
Other
3.67k stars 416 forks source link

Typewriter effect in code cells #523

Open psychemedia opened 4 years ago

psychemedia commented 4 years ago

Many live demos drive virtue from the fact that the presenter is seen to be typing code in before running it ("nothing up my sleeves").

Others have pre-prepared code that they may copy and paste into the execution environment to both speed up the demo process, and reduce typos, whilst at the same time demonstrating that whatever is being demoed has started from a clean slate in the demo environment.

I was wondering if there would be any way of animating the appearance of pre-prepared code in a code cell in a presentation, so that when the slide is revealed it looks like the code is being typed into the code cell? This could either run automatically, a short delay after the slide is loaded, or be triggered by a keyboard shortcut?

I think this may be called typewriter effect? So eg https://mattboldt.com/demos/typed-js/ or https://css-tricks.com/snippets/css/typewriter-effect/ ?

parmentelat commented 4 years ago

Hi

Very cool indeed this typewriter effect thing; your second link, as far as it uses CSS only IIUC, should be rather straightforward to support as part of a user-custom css injection, have you given that a try ?

IMHO longer term this could be envisioned as a more general notebook extension, not specific to rise; my case is that rise has no extension mechanism per se, while jupyter - either classic or lab - has, so it would be easier to bundle that with, say, cell metadata/tag annotations and related keybindings

damianavila commented 4 years ago

IMHO longer term this could be envisioned as a more general notebook extension, not specific to rise; my case is that rise has no extension mechanism per se, while jupyter - either classic or lab - has, so it would be easier to bundle that with, say, cell metadata/tag annotations and related keybindings

That's probably a good idea... then we can just show what the notebook does with that extension...