Jekyll Python Tutor

Automatically embed Python Tutor visualization buttons alongside your code listings.

See Java Crash Course for a live demo of the java_visualizer.html include. Each "Visualize Code" button is automatically generated from the preceding code listing.

Usage

Download the appropriate visualization embed from _includes into your Jekyll website's _includes folder. Then, follow the usage instructions in the file.

pytutor_visualizer.html

{%- capture HelloWorld -%}
print('Hello, world!')
{%- endcapture -%}
{% include pytutor_visualizer.html py="3" code=HelloWorld caption="Hello, world!" %}

The full list of py backend language flags can be found in Philip's repo.

java_visualizer.html

{%- capture HelloWorld -%}
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}
{%- endcapture -%}
{% include java_visualizer.html code=HelloWorld caption="Hello, world!" %}