jekyll-tools

Easy interactive Python & HTML examples on Jekyll sites

Demo Download

Trinket Jekyll Tools

Check out our sample Jekyll site Trinket Jekyll Tools

Include interactive trinkets in your Jekyll site with 2 lines of code. Why? Because static sites are better when they're interactive!

Trinkets are designed for teaching but you can use them whenever you want your readers to see your code work interactively.

Usage

After installation, make your code blocks interactive and awesome with just two additional lines:

{% include trinket-open %}
# your code here
{% include trinket-close %}

That's it! As of Sept 2014 Jekyll Tools supports Python and HTML/CSS.

Python

This code:

{% include trinket-open type='python' %}
import turtle

tina = turtle.Turtle()

for c in ['red', 'green', 'yellow', 'blue']:
    tina.color(c)
    tina.forward(75)
    tina.left(90)

tina.penup()
tina.backward(100)
tina.write("Hello world!")
{% include trinket-close %}

Gives you this interactive Python trinket on your Jekyll site:

Note: This is just a screenshot. See the real thing in action here.

HTML

This code:

{% include trinket-open type='html' %}
<html>
<head>
    <style type="text/css">
        body {
            background-color: #008aff;
            text-align: center;
        }
        .logo {
            position: relative;
            top: 50%;
            transform: translateY(-60%);
        }
        .logo img {
            max-width: 90%;
        }
    </style>
</head>
<body>
    <div class="logo">
        <img src="https://trinket.io/img/trinket-logo-big.png" />
    </div>
</body>
</html>
{% include trinket-close %}

Gives you this interactive HTML trinket on your Jekyll site:

Note: These trinkets support most of HTML and CSS, but not Javascript (yet). Also, you can find a live version of the trinket above here.

Customize!

Make your trinkets the right height:

{% include trinket-open type='python' height='100' %}
for i in range(10):
    print "Only the lines you need"
{% include trinket-close %}

Gives you this interactive Python trinket:

Installation

Drop the trinket-open and trinket-close files into the _includes folder of your Jekyll site.

If you're lazy, here's a one-liner you can run from the root of your Jekyll project:

wget -P _includes https://raw.githubusercontent.com/trinketapp/jekyll-tools/master/_includes/trinket-close https://raw.githubusercontent.com/trinketapp/jekyll-tools/master/_includes/trinket-open

Acknowledgements

Our interactive Python trinket makes heavy use of the awesome Skulpt project, which uses client side Javascript to interpret Python in your browser. Check em out and contribute on Github!

The interactive HTML trinket is soulmates with Mozilla Thimble, which is another awesome project that you can contribute to on Github.

Contributions

Contributions to these tools are welcome. Contact us or open an issue to discuss what you want to do.

License