1

So I'm setting up code highlighting on my blog using Jekyll and Pygments, and the first line of every snippet is offset by some infinitesimal amount. I'm trying to use a right-border of the lineno class to create a gutter, which is making the offset very apparent, as seen below

offset

Here is the DOM when I inspect the relevant area,

css tree

and here is the source:

view source

Here is the relevant CSS Source:

.highlight code {
    background:#3A434A;
    font-family: 'Source Code Pro', Monaco, monospace;
    }
.highlight pre {
    background:#3A434A;
pre .lineno { 
    color: #eff1f5; 
    display:inline-block; 
    padding: 4px 10px 4px 0px; 
    border-right:1px solid #8fa1b3
}

This is infuriating me, hahah; I'm sure I'm missing something obvious. I get consistent behavior across all browsers. Also, Here's a link if you'd like to view it yourself.

1 Answer 1

2

From Jekyll css

pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0; }

code padding-left needs to be 0.

3
  • aweseom! thanks a bundle! Any idea why the padding was affecting the first line that way but not the others? Commented Sep 19, 2014 at 12:49
  • Sorry I'm not a css guru, I just get this from the F12 debug. But if it's not a bug, it's a feature ;-) Commented Sep 19, 2014 at 13:21
  • For some reason, I'm guessing that the <code> tag has no width or height, even though Dev Tools shows it as wrapping the child. The browser is actually applying this padding "in between" the <pre> and the first child element of the <code> Commented Sep 22, 2014 at 19:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.