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
Here is the DOM when I inspect the relevant area,
and here is the 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.