GitHub & Medium with Embedly
💬 Nicely rendered & synced repo files?
📑 Table of Contents
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 Current State
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:
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/2487ce5eb5db0b9da20451c345d2de68That’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-jsBut 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! 😅 🔫
The Developer Story
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.
Recurring Dreams
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-examplehttps://github.com/jthegedus/firebase-functions-graphql-example/blob/master/package.jsonYields 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!
Conclusion
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.
/rant
