CODEWITHSUNDEEP
htmlcssjekyllpygments
oflannabhra
oflannabhra

Reputation: 646

Jekyll offsetting initial line of code snippet highlighting

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.

Upvotes: 1

Views: 344

Answers (1)

David Jacquel
David Jacquel

Reputation: 52809

From Jekyll css

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

code padding-left needs to be 0.

Upvotes: 2

Related Questions