Skip to content

Instantly share code, notes, and snippets.

@potch

potch/gist_line_numbers.css

Created September 26, 2011 18:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save potch/1243028 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save potch/1243028 to your computer and use it in GitHub Desktop.
Download ZIP
CSS to add line numbers to embedded gists
Raw
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;
}
@dmackerman

dmackerman commented Dec 21, 2011

Copy link
Copy Markdown

Good one!

@danriti

danriti commented Jan 25, 2012

Copy link
Copy Markdown

amazing!

@chriseldredge

chriseldredge commented Mar 30, 2012

Copy link
Copy Markdown

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

mewdriller commented May 1, 2012

Copy link
Copy Markdown

👍

@yyl

yyl commented Jun 24, 2012

Copy link
Copy Markdown

Nice job!

@revathskumar

revathskumar commented Jul 26, 2012

Copy link
Copy Markdown

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

@flavioribeiro

flavioribeiro commented Aug 5, 2012

Copy link
Copy Markdown

wow!

@aorcsik

aorcsik commented Sep 23, 2012

Copy link
Copy Markdown

Really nics, thx :)

@oraculum

oraculum commented Nov 1, 2012

Copy link
Copy Markdown

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

dhust commented Jan 6, 2014

Copy link
Copy Markdown

Doesn't seem to work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment