Line highlighting for embedded Gists.

hightlight-gist-line.jquery.js

// jQuery version
$(document).on('click', '.js-line-number', function(event){
    var elem = $(this).next('.js-file-line'),
        bg_color = elem.css('backgroundColor'),
        color_active = 'rgb(248, 238, 199)';

    elem.css('backgroundColor', bg_color === color_active ? 'rgba(0, 0, 0, 0)' : color_active);
});

var elem = $(document.location.hash).trigger('click');

if (elem.length) {
    $('html, body').animate({
        scrollTop: elem.offset().top
    }, 800);
}

hightlight-gist-line.js

// Vanilla.js version
document.addEventListener('click', function (event) {
    var elem = event.target, style;
    
    if (elem.classList.contains('js-line-number')) {
        style = elem.nextElementSibling.style;
        style.backgroundColor = !!style.backgroundColor ? '' : 'rgb(248, 238, 199)';
    }
});

var elem = document.querySelector(document.location.hash);
if (!!elem) {
    elem.click();
    elem.scrollIntoView(false);
}