Gists look crazy with Twenty Twelve

Thanks for the report, could be related to how Twenty Twelve styles pre elements. We’ll look into it and see if it’s fixable in the theme.

Additionally, I believe GitHub rolled out a new version of Gist in the last day or two. It is possible they changed their output in a way that made it less friendly to WordPress themes.

I should have checked how it looked in twentyeleven before I wrote the above. It still looks all messed up with the older theme, so I am guessing the real culprit is the new Gist embed code from GitHub and not necessarily the twenty twelve theme.

@bill Sullivan Can I ask how you embedded the gist in your post?

I tossed up a test here: https://themebuster.wordpress.net/gist-test/ using the JS embed from your gist page, like so:

<script src="https://gist.github.com/1192990.js"></script>

I’m guessing it is falling back on the HTML version and not using the JSON version. Is it possible you don’t have json_decode available in your install, @bill Sullivan?

Could it be a problem with the EMs on line 54 of /wp-content/plugins/embed-github-gist/stylesheets/embed.css?ver=3.5?

padding: .25em .5em .5em .5em !important;

I think we’re having the same problem. Line numbers don’t seem to match the corresponding code. This just happened after gist was updated.

Any idea when you’ll be updating the plugin?

Thanks!

Laura

I’ve been able to install WordPress 3.5 and am able to replicate most of this from here. Unfortunately it looks like several things have changed including the fact that requesting a specific file appears to be broken.

I think that this is going to take some work to fix. I don’t know that I’ll be able to do it in the next few days.

If someone wants to jump in and take a crack at it, please fork my repository on GitHub and send me a pull request. Otherwise this will have to wait.

https://github.com/dflydev/embed-github-gist

Actually, I take it back. I just pushed an update. If you can try out version 0.11 it would be greatly appreciated.

This plugin now requires json_decode and it will default to showing the JavaScript representation. If EMBED_GISTHUB_INLINE_HTML is set to true it will be largely unstyled.

The styles are pretty broken for me. I don’t see the embed.css file being included on my pages anymore?

After I put in a ‘bump=1′ attribute in one post, all my posts’ gists started working mostly correct: https://docwhat.org/vim-preserve-your-cursor-and-window-state/

You can see a blank line between the last line number and the footer, but that’s (at least) acceptable.

Bumping is a good trick to try.

I’m hoping that with the most recent changes things will eventually stabilize. I’m no longer distributing a copy of embed.css as that was not really a good way to do things to begin with. It was not able to keep up with changes that GitHub was making and would occasionally cause problems if the HTML changed that required CSS updates but embed.css didn’t get the update.

For those still having the issue, try adding the following to one of your gists:
bump=1

For example:
[gist bump=1]<gist url>[/gist]
or
[gist id=<gist id> bump=1]

If you already have a bump flag in your gist embed, try removing the bump.

Both methods worked for me.

I have the same issue: https://noseyparka.me.uk

The gists are formatted normally in the Twenty Twelve theme preview, but when the theme is enabled, the problem is visible.

I am a wordpress beginner and not sure my solution works for you as well.
I tried bump method but it didn’t work for me and the other gist code plugins had same issue with line matching.

Anyway.. I edited .comment-content table{ line-height = value } in twenty twelve theme stylesheet(style.css). It seems like line-height value of “.comment-content pre{}” should be same as it.

Mine initial values were like this…

.comment-content pre {
	...
	line-height: 1.714285714;
	...
}
.comment-content table {
	...
	line-height: 2;
	...
}

and I changed value like this

.comment-content table {
	...
	line-height: 1.714285714;
	...
}

my sample