CSS to add line numbers to embedded gists

gist_line_numbers.css

.gist-highlight {
    border-left: 3ex solid #eee;
    position: relative;
}

.gist-highlight pre {
    counter-reset: linenumbers;
}

.gist-highlight pre div:before {
    color: #aaa;
    content: counter(linenumbers);
    counter-increment: linenumbers;
    left: -3ex;
    position: absolute;
    text-align: right;
    width: 2.5ex;
}

Good one!

amazing!

Add this to the last selector to prevent line numbers from being selected during copy/paste operations:

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

Via http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting

👍

Nice job!

Great Hack... Thankz
@chriseldredge A special thankz for you too.....

wow!

Really nics, thx :)

now is correct:

.gist .gist-highlight {
border-left: 3ex solid #eee;
position: relative;
}

.gist .gist-highlight pre {
counter-reset: linenumbers;
}

.gist .gist-highlight pre div:before {
color: #aaa;
content: counter(linenumbers);
counter-increment: linenumbers;
left: -3ex;
position: absolute;
text-align: right;
width: 2.5ex;
}

Doesn't seem to work.