GitHub & Medium with Embedly

January 23, 2018 0 Comments

GitHub & Medium with Embedly

 

 

Medium uses Embed.ly for rich media embeds. Embed.ly have a GitHub provider which renders Gists nicely using GitHub embedded Gists. If you have tried linking code on Medium from GitHub, you’ve surely hit the wall I’m about to discuss.

I hope that by raising awareness of this problem, we can reach the person who’s not only capable but able to solve it. I’d have a crack if it were OSS, but alas it is not.

The Embed.ly GitHub provider accepts URLs with the following schemes:

http://gist.github.com/
https://gist.github.com/

This means that it can render Gists really nicely within Medium:

An example from one of my blog posts

The GitHub code highlighting for the language of the Gist file linked is great! It’s much better than the standard Medium.com code rendering:

export default () => <div>no code highlighting :(</div>

And the mobile rendering is superb too!

So what’s the problem then, it’s clearly better?!

Yes, it’s rendering is on point, but the support for repositories and individual files leaves much to be desired.

If you have a Gist with two files and link just the Gist URL you get:

https://gist.github.com/jthegedus/2487ce5eb5db0b9da20451c345d2de68

That’s fine, I expected that.

If you link just one file from the Gist you would expect only that file to render:

https://gist.github.com/jthegedus/2487ce5eb5db0b9da20451c345d2de68#file-gist1-js

But it renders both Gist files!

This means if you’re writing a blog post with multiple files you want to link throughout, then they must each be individual Gists! 😅 🔫

Every time I write a new blog post I want to include and discuss some vital code snippets. Each time I have to go and create many Gists to take advantage of the beautiful rendering. I dislike reading posts that don’t take advantage of this rendering, so to practice what I preach; I will create these Gists for anything that’s more than a couple lines of code. It’s frustrating.

The crux of the problem is not Gist file rendering, but support for files from within GitHub repositories! This is in no way supported by GitHub through the Embed.ly GitHub provider.

If I write a blog post exploring some project and I want to share my example code, I can only link the entire repo, not individual files. Making Gists that mirror the repository files I want to link is a time-consuming solution. I use distributed file version management, so I don’t have two copies of things out of sync.

E.G.:

https://github.com/jthegedus/firebase-functions-graphql-example
https://github.com/jthegedus/firebase-functions-graphql-example/blob/master/package.json

Yields the same render from Medium. In the first instance it renders the information I expect, but in the second, it does not. I expected the file contents to be rendered as with the Gist.

// Current supported URL scheme
http://gist.github.com/
https://gist.github.com/
// The Dream Schemes
https://gist.github.com/<gist-id>#<filename.ext>;
https://github.com/<username>/<repository-name>/blob/<branch-name>/**/<filename.ext>;

I just want my up to date (git repository) code files to render nicely!

The panacea here is single file rendering from repository and Gist links in Medium with Embed.ly through a GitHub embed. If you know the person at GitHub who can make this happen, or if there’s a way in which we could work on a solution as a community, then please share! I’d happily pull my hair out all weekend working with regex if that’s what it took to link single files from my repo and have them render the same as these beautiful Gists.


Tag cloud