Dynamically turn Gist urls into scripts. This is useful when using a CMS like Webflow that doesn't allow you to create <script> or <code> tags directly in it's RichText Editor.

dynamically-load-gist.js

$('body').html($('body').html().replace(/~\[(.*?)\]~/g, "<div class=\"js-gist\" data-src=\"$1\">$1</div>"));

$('.js-gist[data-src]').each(function(){

    // we need to store $this for the callback
    var $this = $(this);

    // load gist as json instead with a jsonp request
    // NOTE: currently this only works for single files, if you want the whole gist, use this
    // $.getJSON( $this.attr('data-src') + '?callback=?', function( data ) {
    $.getJSON( $this.attr('data-src') + '&callback=?', function( data ) {

        // replace script with gist html
        $this.html(data.div);

        // load the stylesheet, but only once…
        add_stylesheet_once( data.stylesheet );

    });

});

function add_stylesheet_once( url ){
    $head = $('head');
    if( $head.find('link[rel="stylesheet"][href="'+url+'"]').length < 1 )
        $head.append('<link rel="stylesheet" href="'+ url +'" type="text/css" />');
}

usage.html

<!-- notice we're referencing the .json version of the embed script, not the .js -->

<!-- single files -->
~[https://gist.github.com/mbaxter91288/2a63a687683163bc803049b09b30d597.json?file=dynamically-load-gist.js]~
<!-- whole gist -->
~[https://gist.github.com/mbaxter91288/2a63a687683163bc803049b09b30d597.json]~