Twenty Eleven/Twelve: Mismatched lines in GitHub Gists

[obenland]

GitHub Gists are displayed with the code and line numbers misaligned, due to the difference in font-size and/or line-height of <pre> and <table> elements.

Originally reported in ​this thread and on wp.com.

Example: ​http://themebuster.wordpress.net/gist-test/

So, while I'd love to fix this, I'd vote that this specific of a fix should be in the plugin itself, not in the default theme stylesheet.

23184.diff looks sane to me and I like it a lot better than all-out usurping the <pre> styles.

Replying to lancewillett:

So, while I'd love to fix this, I'd vote that this specific of a fix should be in the plugin itself, not in the default theme stylesheet.

Are you talking about upstream?

Replying to lancewillett:

So, while I'd love to fix this, I'd vote that this specific of a fix should be in the plugin itself, not in the default theme stylesheet.

I'm confused. I thought your example Gist test on themebuster is using the JavaScript embed provided by GitHub, no?

I can reproduce it in a local test with the javascript method.

Admitted, it is a prettic specific fix. While we provide custom code for third party services like Twitter and Jetpack, it could be argued that those are more likely to be tied in, than a Gist.

Marking as "close" based on looking at the original thread: ​http://wordpress.org/support/topic/gists-look-crazy-with-twenty-twelve -- and looking at the URLs, the layout looks fixed in the plugin now.

I think we should ping Github team and ask them to update the embedded CSS to account for line-height and font-size. That way instead of just patching this one theme -- it'll work great everywhere.

Replying to lancewillett:

I think we should ping Github team and ask them to update the embedded CSS to account for line-height and font-size. That way instead of just patching this one theme -- it'll work great everywhere.

+1

Will loop back on this after 3.6 is stable.

This really shouldn't be an issue of manually specifying a line height. It can be easily resolved with:

.gist pre {

font: inherit;
line-height: inherit;
white-space: pre;

}

(The white-space: pre is to resolve a twentythirteen issue, where the lines can wrap and then not match up with the numbers)