Adding gists to Tumblr posts

Question

I'm having difficulty embedding gists in my Tumblr posts. I want to add a tutorial on solving a problem and I want to include source code of the algorithm in my post with syntax highlighting.

I tried to include the embed code of the gist in the HTML of the post, but it didn't work. Can anyone tell me how to do this?

Answer 1

Embed a Gist on Tumblr

There are two ways:

Dirty / Quick:

When creating a post, click HTML and then add in the following line:

<script src="https://GISTURLHERE.js"></script>

This will then include the Gist. The concern with this is the Tumblr parser could remove the inline script tag.

Clean / Slower

Use the following lib: https://github.com/blairvanderhoof/gist-embed

This will embed the gist, after reading the URL from the data-attr. The code block should be unaffected by Tumblrs parser.

There are alternatives to this solution, but afaik the basics for most are the same.

Take a URL (to your gist) and then create a script tag pointed to that URL. Once the script has loaded, the gist will be rendered.

Hope that helps.

Answer 2

Import following scripts to theme.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/fpifyru/VCxlv9xwi/writecapture.js"></script>
<script src="http://static.tumblr.com/fpifyru/AKFlv9zdu/embedgist.js"></script>

Then just add

<div class="gist">[gist URL]</div>

Example:

<div class="gist">https://gist.github.com/1395926</div>

Answer 3

A little update to this code, as Tumblr Rich text editor kindas mess with the "div' tag

<script src="http://static.tumblr.com/fpifyru/VCxlv9xwi/writecapture.js"></script>
<script type="text/javascript">
    $(function() {
        $("a[href]").each(
            function(index, element) {
                if ( $(element).attr('href').indexOf('gist.github.com') > 0 ) {
                    var divElement = $('<div></div>');
                    $(element).after(divElement);
                    writeCapture.html(divElement, '<script src="'+$(element).attr('href')+'.js"></'+'script>');
                    $(element).remove();
                }
            }
        );
    });
</script>

https://gist.github.com/tryvin/74c72bdae96f21e844a0