Currently, I'm in the process of setting up code highlighting for my blog using Jekyll and Pygments. However, I'm facing an issue where the first line of every code snippet seems to be slightly offset. To create a gutter effect, I'm utilizing the right-border of the lineno class, but this is only making the offset more noticeable, as demonstrated below.
Upon inspecting the relevant section in the DOM, I came across the following:
and here is the source:
Below is the relevant CSS snippet:
.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 issue is really getting on my nerves; I'm sure there's something obvious that I'm overlooking. The behavior seems to be consistent across multiple browsers. Additionally, feel free to click Here to see it yourself.