Skip to content
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
Closed

GitHub gist changes break gist plugin formatting #847

lukekarrys opened this issue Dec 11, 2012 · 30 comments

Comments

@lukekarrys
Copy link
Contributor

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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link
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)

@ghost
Copy link

ghost 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
Copy link

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
Copy link

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.

@ghost
Copy link

ghost 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
Copy link
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
Copy link

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
Copy link
Collaborator

parkr commented Dec 17, 2012

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

@parkr parkr closed this as completed Dec 17, 2012
@kitchen
Copy link

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
Copy link
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
Copy link

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
Copy link
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
Copy link
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
Copy link
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
Copy link

WizzApp commented Oct 29, 2013

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

@jbrains
Copy link
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
Copy link

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
Copy link

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
Copy link
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
Copy link

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
Copy link

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

@vertexclique
Copy link

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
Copy link

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
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
Copy link

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

@pablocobelli
Copy link

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
Copy link
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.
Labels
None yet
Projects
None yet
Development

No branches or pull requests