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
Copy link
Copy Markdown

dmackerman commented Dec 21, 2011

Good one!

@danriti
Copy link
Copy Markdown

danriti commented Jan 25, 2012

amazing!

@chriseldredge
Copy link
Copy Markdown

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
Copy link
Copy Markdown

mewdriller commented May 1, 2012

👍

@yyl
Copy link
Copy Markdown

yyl commented Jun 24, 2012

Nice job!

@revathskumar
Copy link
Copy Markdown

revathskumar commented Jul 26, 2012

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

@flavioribeiro
Copy link
Copy Markdown

flavioribeiro commented Aug 5, 2012

wow!

@aorcsik
Copy link
Copy Markdown

aorcsik commented Sep 23, 2012

Really nics, thx :)

@oraculum
Copy link
Copy Markdown

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
Copy link
Copy Markdown

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