When github unveiled their gist service in 2008, I went into my room, jumped up on my bed, ripped all the playboy posters off the ceiling and taped up a giant portrait of the octocat.
But HOT DAYYUMN is github's lack of line numbers on their embedded gists pissing me off! I've been trying to write another raving containing a reasonable amount of code that is explained over the course of the post — pretty fucking hard without line numbers!
So I went and wrote some javascript hacks to add line numbers in for me.
The hacks
I originally tried to do it with prototype, but was having so much trouble getting it to work on IE6 that I decided to try out jquery instead. Cunting fuck I hate fucking Internet Explorer 6! Ive lost count of the number of rape fantasies I've had about Bill Gates! Anyway, check out these hacks below — maximum credit goes to gaving for refactoring them into not sucking.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function addLineNumbersToAllGists() { | |
| $('.gist').each( function() { | |
| _addLineNumbersToGist('#' + $(this).attr('id')); | |
| }); | |
| } | |
| function addLineNumbersToGist(id) { | |
| _addLineNumbersToGist('#gist-' + id); | |
| } | |
| function _addLineNumbersToGist(css_selector) { | |
| $(document).ready( function() { | |
| $(css_selector + ' .line').each(function(i, e) { | |
| $(this).prepend( | |
| $('<div/>').css({ | |
| 'float' : 'left', | |
| 'width': '30px', | |
| 'font-weight' : 'bold', | |
| 'color': '#808080' | |
| }).text(++i) | |
| ); | |
| }); | |
| }); | |
| } |
Notice those line numbers? ZOMG!
How to use said hacks
Its easy, check out this example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 | |
| Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head></head> | |
| <body> | |
| <!--add a couple of gists to the page--> | |
| <script src="http://gist.github.com/454771.js?file=line_number_hacker.js"></script> | |
| <script src="http://gist.github.com/450963.js?file=startshell_mapping.vim"></script> | |
| <!--include jquery--> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
| <!--include the line number hackz0r script--> | |
| <script src="http://gist.github.com/raw/454771/gist-line-number-hack.js"></script> | |
| <!--add line numbers to one of the gists--> | |
| <script type="text/javascript"> | |
| addLineNumbersToGist(454771); | |
| //or, add line nums to all gists with this: | |
| //addLineNumbersToAllGists() | |
| </script> | |
| </body> | |
| </html> |
Its worth noting that the url for the "line number hackz0r script" is from the "view raw" link of the previous gist. If you remove the SHA1 from the url, it seems it always grabs the latest revision of the gist.
Posts
