<div dir="ltr">Ok, so a few afternoon hacks later, and I have a prototype of a graphical stepper/debugger with code highlighting, graphical breakpoints, and slider control for speed. What do I mean? See example tracing Scheme factorial:<br><br><a href="https://www.youtube.com/watch?v=f8PvbMt6i1o">https://www.youtube.com/watch?v=f8PvbMt6i1o</a><br><br>I based my experiment on an animation example by Jake Vanderplas:<br><br><a href="http://jakevdp.github.io/blog/2013/05/19/a-javascript-viewer-for-matplotlib-animations/">http://jakevdp.github.io/blog/2013/05/19/a-javascript-viewer-for-matplotlib-animations/</a><div><br></div><div>I did a few experiments to play with CodeMirror and running code (fail):<br><br><a href="http://jupyter.cs.brynmawr.edu/hub/dblank/public/Experiments/Breakpoint%20Tests.ipynb">http://jupyter.cs.brynmawr.edu/hub/dblank/public/Experiments/Breakpoint%20Tests.ipynb</a><br><br>Initially, I thought I'd use Widgets and real code execution. But ended up using raw Javascript and kernel.execute commands. There probably is a better way. In any event, the version in the video is just a prototype, but is designed to be code agnostic, working with any language through the MagicKernel's debug magic  [1].  Not every language may be able to do this as easily as Scheme [2], however.<br> </div><div>-Doug</div><div><br></div><div>[1] - <a href="https://github.com/blink1073/jupyter_kernel">https://github.com/blink1073/jupyter_kernel</a></div><div>[2] - <a href="https://bitbucket.org/ipre/calico/src/master/src/calico_scheme_kernel/">https://bitbucket.org/ipre/calico/src/master/src/calico_scheme_kernel/</a> and </div><div><a href="https://bitbucket.org/ipre/calico/src/master/src/calico/scheme.py">https://bitbucket.org/ipre/calico/src/master/src/calico/scheme.py</a><br><br>On Tue, Sep 23, 2014 at 10:50 PM, Doug Blank <<a href="mailto:doug.blank@gmail.com">doug.blank@gmail.com</a>> wrote:<br>><br>> We are currently running an external kernel (Scheme) based on the "wrapper kernel" [1]. We would like to have a mode such that we could highlight the expression in the code cell as the program "runs".<br>><br>> Is there an example of something like this? If not, what would be the recommended method to do this? Perhaps a CodeWidget, with specialized comm message handling to highlight the text, with stepper controls?<br>><br>> I see that CodeMirror supports highlighting an area [2]. Now, just need to be able to send the region bounds as the program runs, and receive them.<br>><br>> Any pointers appreciated,<br>><br>> -Doug<br>><br>> [1] - <a href="http://ipython.org/ipython-doc/dev/development/wrapperkernels.html">http://ipython.org/ipython-doc/dev/development/wrapperkernels.html</a><br>><br>> [2] - cell.code_mirror.markText({line: 6, ch: 2}, {line: 6, ch: 5}, {className: "styled-background"});</div></div>