Line numbers on embedded Gists
Posted on by josh
For all of you bloggers out there that like embedding gists but are frustrated by the lack of line numbers, I found a nice CSS solution. After a little googling, I found this solution by potch. It looks as though the structure of an embedded gist has changed slightly so I modified the css to look like the following:
.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; }
Include this somewhere in your stylesheets and viola, you get nice line numbers for all of your embedded gists (in modern browsers at least).
Tweet
Pingback: Display Line Numbers on Embedded Gists | The Carbon Emitter