Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS to add line numbers to embedded gists
.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;
}
@dmackerman

This comment has been minimized.

Copy link

dmackerman commented Dec 21, 2011

Good one!

@danriti

This comment has been minimized.

Copy link

danriti commented Jan 25, 2012

amazing!

@chriseldredge

This comment has been minimized.

Copy link

chriseldredge commented Mar 30, 2012

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

@mewdriller

This comment has been minimized.

Copy link

mewdriller commented May 1, 2012

👍

@yyl

This comment has been minimized.

Copy link

yyl commented Jun 24, 2012

Nice job!

@revathskumar

This comment has been minimized.

Copy link

revathskumar commented Jul 26, 2012

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

@flavioribeiro

This comment has been minimized.

Copy link

flavioribeiro commented Aug 5, 2012

wow!

@aorcsik

This comment has been minimized.

Copy link

aorcsik commented Sep 23, 2012

Really nics, thx :)

@oraculum

This comment has been minimized.

Copy link

oraculum commented Nov 1, 2012

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;
}

@dhust

This comment has been minimized.

Copy link

dhust commented Jan 6, 2014

Doesn't seem to work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.