Como carregar scripts do Gist em páginas dinâmicas com AJAX

O GitHub possui um pequeno sistema de compartilhamento rápido de códigos chamado Gist. Ele permite criar embeds com javascript de trechos de códigos para o conteúdo de qualquer site, formando o código com estilos, indentando e colorindo-o de acordo com o tipo de script/linguagem. No entanto, há um problema: o código de embed do Gist está implementado com a função document.write(), o que inviabiliza o carregamento dinâmico via AJAX das páginas.

Contudo, há uma solução relativamente simples. Podemos utilizar um hack que redefine a função document.write() para procurar a tag de <script> no conteúdo carregado e buscar a informação que precisamos. Dessa forma, conseguiremos carregar os scripts de forma dinâmica. Abaixo está o código do hack:

document.addEventListener("DOMContentLoaded", function(event) {
    
    document.write = function (code) {
        
        var gistURL, div, a, style;
        
        // create a <div> element to search gist url
        div = document.createElement('div')
        div.innerHTML = code
        
        // get gist url from code
        if(a = div.querySelector( "div.gist-meta a" )) {
            gistURL = a.getAttribute('href')
        }	
        
        // search for <script> tag and update gist code
        if(gistURL) {
            var gistID = gistURL.replace(/\/raw(.)*/, '').replace(/^(.)*gist.github.com\/([^\/]+)\//, '');
            document.querySelectorAll('script').forEach(function (item) {
                
                var scriptURL = item.getAttribute('src');
                
                if(scriptURL && scriptURL.match(new RegExp('^(.)*gist.github.com\/([^\/]+)\/'+gistID))) {
                    item.outerHTML = code;
                }
            });
        }
        // include CSS
        else if (!document.write.cssIncluded){
            document.write.cssIncluded = 1;
            style = document.createElement('div')
            style.innerHTML = code
            document.getElementsByTagName("head")[0].appendChild(style.childNodes[0]);
        }
        
    }	
}

Espero que este artigo tenha sido útil para você entender como carregar scripts do Gist em páginas dinâmicas através do uso do AJAX. Com o hack apresentado, é possível superar a limitação da função document.write() e obter os benefícios do Gist para exibir trechos de código formatados de maneira elegante em seu site. Lembre-se sempre de considerar as melhores práticas de SEO e de otimização de carregamento de scripts ao implementar essa solução em seus projetos.