Tumblr – How to Add Gists to Posts

embedtumblr

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?

Best Answer

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.