GitHub gist changes break gist plugin formatting

[lukekarrys]

Not sure exactly what the issue is but GitHub updated their gists today and it looks like it breaks a few things with regards to the gist plugin.

Here is how a gist on my site looks: http://lukecod.es/blog/2012/02/14/pitchfork-dot-com-album-rating-api/

It looks like at least two things are broken:

• That page (source) is only supposed to bring in one gist file and now it brings in all files
• Formatting and styling

I plan to take a look at this over the next couple days, but thought I'd open an issue to avoid duplicates and in case anyone wants to take a look at it sooner.

[parkr]

Just taking a look into it now.

Taking a look at the gist plugin, it looks like everything is working (URL endpoints, etc, are all still functional).

It's probably the case that the new gist styling in the script file (gist.github.com/gist_no.js) is including new CSS (complete with !important's... ugh) which is interfering with the styles. I'll see if I can track down the offending styles.

[parkr]

Shite, Github has eff'd this all up.

@imathis, I'd recommend throwing out the script thing (.js) altogether and just using the code. Github's added waayyy too many styles, most of which has !important's. Yikes!

[parkr]

_syntax.scss will definitely have to be changed, to match the new gist output hierarchy:

[parkr]

Perhaps instead of

html .gist .gist-file .gist-syntax .gist-highlight

in the first line, we have:

html .gist .gist-file .gist-syntax .highlight

to match:

[parkr]

It also looks like a Gist-wide issue (perhaps a fix is on its way?):

(from Github Flavored Markdown page)

[ghost]

Looks like they also broke embeds that don't specify a file name - doesn't display anything at all (and thus broke all of mine)

[mttrb]

I have got my gists so that they are at least displaying now (although horribly formatted) by adding a specific filename. However, one of my gists was pointing at an Objective-C category file with the name NSArray+NegativeIndexes.m. The + sign in this filename was also causing the gist to not display, presumably being interpreted as a space in the URL. I had to change the gist tag in my post to escape the + with a %2B. I assume this escaping should be done within Octopress/Liquid.

[ritalin]

My gist code embedded gist page involves right justify and a deal of new lines.
For your information, Deleting line 24 (line-height: 2), line 25 (text-align: justify) and line 98 - 100 (td{text-align: center;}) in _article.scss lead to display correctly.
But the line number has been broken yet.

[ghost]

PR #849 fixes the issue of Gists not showing because of the missing file name - still looks horrible, but at least the content is there.

[imathis]

I'm on this, I'll have a fix up hopefully tonight. While it's nice to be able to use Gists to embed things, I think this is a good time to point out, having external content isn't generally a good practice.

1. When editing a post, you have to go to manage content in multiple places. This is a pain.
2. The source can change things and break your embed codes, styling overrides, etc.
3. Additional requests slow down rendering and when the source is down, your pages are incomplete.

There are some good use cases for gists, but in general I recommend switching to locally generated code. Remember you can still link out to the gist like this:

``` [lang] [description] [url] [download link text]
some code here
```

This way you can still link to gists to allow people to fork, comment, and user other cool gist features.

[troygoode]

I was able to temporarily resolve this using the fix from #849 and the following CSS overrides:

.highlight {
  background: none !important;
}
.line_numbers {
  line-height: 18px;
  font-size: 13px;
}

[parkr]

We're re-writing the Gist plugin, and this will be dealt with then.

[kitchen]

just to clarify, this is still 'broken', yes? I just updated to master and my gists are still a little 'off'... the background color only extends to the right as far as the longest line even though the bounding box is wider than that.

example:
http://blog.kitchen.io/archive/2012/08/22/my-mutt-setup/

If it's still broken, that's fine, I'm patient, I just want to make sure I haven't broken something on my own accord :)

[parkr]

Yep it's still "broken" on the master branch. The 2.1 branch has a fix if you want that.

[rtomaszewski]

I'm using the most standard github settings possible. With this configs my gist are broken and have this ugly extra new line added. How do I change to 2.1 to get it fixed?

example:
http://rtomaszewski.blogspot.co.uk/2013/02/how-to-automatically-adjust-mouse-wheel.html

[jbrains]

I'm taking a stab at a gist-no-css tag that downloads the gist and uses codeblock to display it. Maybe someone here will enjoy it.

[imathis]

@jbrains That's actually quite similar to something I've already written for 3.0. I'm hoping to release it soon as a standalone gem plugin under the Octopress org repository. I've already released the pygments and codefence plugins that way.

[jbrains]

Thanks, Brandon. I got that impression, although I couldn't figure out in the first 3 minutes how you intended to implement that for 3.0, so I figured I'd not worry about it. I'll put something together for 2.x, because it gives me something to do.

[WizzApp]

@jbrains Any updates on this? Could really use that now ;-)

[jbrains]

Slowly working on it. I don't know when I can finish it. I won't be quiet
about finishing it. :-)

J. B. Rainsberger :: jbrains.ca
On 29 Oct 2013 11:03, "Daniel Rosendorf" notifications@github.com wrote:

@jbrains https://github.com/jbrains Any updates on this? Could really
use that now ;-)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/847#issuecomment-27290207
.

[rtomaszewski]

This is very sad that this issue is still not solved. What is the point allowing people to post gists if they look terrible after rendering the html.

To get my link to look as it should I have to disable this css property.

.post div {
margin: 0 0 .75em; <<< disabling this make the git look correct.
line-height: 1.3em;
}

are you guys going to fix the issue. It doesn't look so difficult or does it?

[rtomaszewski]

For others if they have had the same problem on gogole blog

this was the issue before:

After adding this little piece of CSS to modifying my blog template:

<style> .gist div { margin: 0 0 0; } </style>

Gist after:

[jbrains]

Done. #1422

[watsonbox]

Not sure if it's going to be of much value once octopress-gist is in use, but I fixed Gist styling on my blog for the time being by overriding document.write to avoid adding the Github stylesheet:

watsonbox/watsonbox.github.com@e0a7a90

I can always create a pull request if this does seem useful for the current master branch. Perhaps it would be better to only render the JS block if a global config option is set, and if there are embedded gists on the page.

[cancan101]

This is my attempt at a fix: cancan101/cancan101.github.io@d30d956

[vertexclique]

They changed the interface of Gist again. It is not working and behaving like what @rtomaszewski posted.

[vertexclique]

I think removing these two will fix the problem:

font-size: 13px;
line-height: 1.45em;

[info-maps]

This fix my issue with formatting using the Jetpack gist shortcode.
.gist div.line{
text-align: left;
}

[pablocobelli]

I realize this is an old thread, but your discussion is the closest one to my question that I could find.

Would you, by any chance, know what is github doing to generate the html code for the embed? I mean, which syntax highlighter and style are used to generate the arguments in the documentwrite commands? Thanks!

[parkr]

what is github doing to generate the html code for the embed

@pablocobelli The relevant code is open source: jekyll-gist.