embedded gists have extra line breaks

Question

I've embedded a github gist into my blog and the resultant code has some extra line breaks at the top and bottom that I would like to remove. My blog uses css from the bootstrap project, and it also tweaks the font:

body {
    font: 100%/1.5 sans-serif;
}

I've created this fiddle as a demo of the issue.

What's the best way to get rid of the breaks? Should I be styling the embedded gist's font? Thanks!

Answer 1

Apart from Sody's answer where you have to reset the font, you have also to change the white-space property behaviour to align code and number lines.

With:

.gist pre,
.gist code {
    font: inherit;
    white-space: pre;
}

Your gist should display perfectly: JsFiddle

Answer 2

This happens because of different line-height in line numbers and code lines. And it is because you use relative line-height(that depends on font size) and different font sizes for line numbers(your font size) and line code (bootstrap overrides font-size and line-height for pre and code elements). To fix this you can reset bootstrap styles for github gists:

UPD:

.gist pre,
.gist code {
  font: inherit;
  white-space: pre;
}

proof: http://jsfiddle.net/W25px/8/