3

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?

migrated from stackoverflow.com Oct 23 '13 at 3:44

This question came from our site for professional and enthusiast programmers.

2

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.

0

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>
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.