New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GitHub gist changes break gist plugin formatting #847

Closed
lukekarrys opened this Issue Dec 11, 2012 · 30 comments

Comments

Projects
None yet
@lukekarrys
Contributor

lukekarrys commented Dec 11, 2012

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

This comment has been minimized.

Collaborator

parkr commented Dec 12, 2012

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

This comment has been minimized.

Collaborator

parkr commented Dec 12, 2012

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

This comment has been minimized.

Collaborator

parkr commented Dec 12, 2012

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

Screen Shot 2012-12-11 at 8 48 40 PM

@parkr

This comment has been minimized.

Collaborator

parkr commented Dec 12, 2012

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:

Screen Shot 2012-12-11 at 8 51 37 PM

@parkr

This comment has been minimized.

Collaborator

parkr commented Dec 12, 2012

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

Screen Shot 2012-12-11 at 8 54 17 PM

(from Github Flavored Markdown page)

@adamcaudill

This comment has been minimized.

adamcaudill commented Dec 12, 2012

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

This comment has been minimized.

mttrb commented Dec 12, 2012

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

This comment has been minimized.

ritalin commented Dec 12, 2012

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.

@adamcaudill

This comment has been minimized.

adamcaudill commented Dec 12, 2012

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

This comment has been minimized.

Owner

imathis commented Dec 14, 2012

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

This comment has been minimized.

troygoode commented Dec 16, 2012

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

This comment has been minimized.

Collaborator

parkr commented Dec 17, 2012

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

@parkr parkr closed this Dec 17, 2012

@kitchen

This comment has been minimized.

kitchen commented Feb 10, 2013

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

This comment has been minimized.

Collaborator

parkr commented Feb 10, 2013

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

@rtomaszewski

This comment has been minimized.

rtomaszewski commented Feb 10, 2013

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

This comment has been minimized.

Contributor

jbrains commented Oct 14, 2013

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

This comment has been minimized.

Owner

imathis commented Oct 16, 2013

@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

This comment has been minimized.

Contributor

jbrains commented Oct 17, 2013

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

This comment has been minimized.

WizzApp commented Oct 29, 2013

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

@jbrains

This comment has been minimized.

Contributor

jbrains commented Oct 29, 2013

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 comment has been minimized.

rtomaszewski commented Nov 6, 2013

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

This comment has been minimized.

rtomaszewski commented Nov 8, 2013

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

this was the issue before:
image

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

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

Gist after:
image

@jbrains

This comment has been minimized.

Contributor

jbrains commented Nov 20, 2013

Done. #1422

watsonbox added a commit to watsonbox/watsonbox.github.com that referenced this issue Mar 25, 2014

@watsonbox

This comment has been minimized.

watsonbox commented Mar 25, 2014

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 comment has been minimized.

cancan101 commented May 14, 2014

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

@vertexclique

This comment has been minimized.

vertexclique commented May 24, 2014

They changed the interface of Gist again. It is not working and behaving like what @rtomaszewski posted.
screen shot 2014-05-24 at 16 14 43

@vertexclique

This comment has been minimized.

vertexclique commented May 24, 2014

I think removing these two will fix the problem:

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

VincentTam added a commit to VincentTam/vincenttam.github.io that referenced this issue Aug 3, 2014

Fixed the problem of embedding Gists
Followed cancan101/cancan101.github.io@d30d956 and imathis/octopress#847
and discovered that manually changing `sass/partial/_syntax.scss` will
do.  Changing the SCSS file under `.themes/classics/` is *unnecessary*.
@info-maps

This comment has been minimized.

info-maps commented Feb 23, 2015

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

@pablocobelli

This comment has been minimized.

pablocobelli commented Feb 28, 2016

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

This comment has been minimized.

Collaborator

parkr commented Feb 29, 2016

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

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

Repository owner locked and limited conversation to collaborators Feb 29, 2016

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.