112

The new GitHub Gist interface has one embed snippet for the entire gist which embeds all files in the gist. The old interface had embed code for each file in the gist. Anyone know if there's a trick to embed a single file?

3
  • 26
    This question is about the "API" for gists, a tool used by programmers. The questions is about sharing code. As such, this seems entirely on topic. As I read the scope defined by the community, I struggle to see how this doesn't fit. I found both the question and the answer, very useful as a programmer.
    – Eric Bloch
    Jan 15, 2014 at 19:48
  • 3
    This question is useful and has a useful answer for programmers. Why on earth was this closed as off-topic? Mar 27, 2015 at 9:13
  • Gonna add on here: In scope defined by community: "software tools commonly used by programmers". Github gist is a tool commonly used by programmers, so any questions about its API is entirely relevant. Aug 5, 2015 at 14:06

4 Answers 4

166

Take the gist URL from the left-hand side and after the .js add a query string like ?file=myFile.blah, e.g.

<script src="https://gist.github.com/4505639.js?file=macroBuild.scala" type="text/javascript"></script>
4
  • 2
    This used to work, but recently I think it has stopped! On my blog posts now it is spitting out all the files in the gist where it used to do individual ones! I think I am going to have to split my files into individual gists :( Is anyone else experiencing this?
    – nootn
    Feb 5, 2013 at 11:18
  • 2
    still working for me: letitcrash.com/post/40198993865/… Mar 8, 2013 at 12:06
  • This "works" for me, but the styling fails. My own styling sort of overrides the styling specified by the embedded script, and as a result the line numbers in the generated markup don't align with the actual source code. Really unfortunate, and I couldn't get it to line up, and wasn't up to the task of debugging the CSS. So I ended up doing it with jQuery, and an ajax call to api.github.com. I then added an external highlight function. Here's a gist showing how to embed a gist: gist.github.com/DinoChiesa/5624844
    – Cheeso
    May 22, 2013 at 2:25
  • Just to continue the confirmations, this still works on Blogger Jul 19, 2019 at 10:53
12

Medium

For those who want to use it on the medium, Medium does not support and does not query parameters in the URL when you add it after the paste of the URL. So just follow these 4 steps IN THE ORDER.

So:

⚠️ Order matters!

  1. Copy the (multi-file) gist path. e.g.:
https://gist.github.com/MojtabaHs/91e34fd0e987fe7ce801936dc6ece0e8

  1. Paste it somewhere else than the Medium article that not preserves the rich data of the text. Like an online textbox for example:

Demo

⚠️ Do not hit search or return button


  1. Append the query param for the file to the URL. e.g:
https://gist.github.com/MojtabaHs/91e34fd0e987fe7ce801936dc6ece0e8?file=Interface.swift

Note that ?file=Interface.swift at the end of the URL, right?


  1. Copy and paste it in the article and see the magic 🔮

An article using this method:

Implement Custom Activity Indicator With The SwiftUI


The MOST Important note that MUST be considered:

⚠️ Note that you MUST copy an unformatted plain text in the medium and MUST NOT edit the URL after pasting it in the Medium! You can copy the link in an online textbox like google.com and after appending the query, copy it back and paste it in the Medium.

0
1

GitHub provides this same information here on their site. As others have said the official way is to attach ?file=name-of-file.ext to the end of the embed code's URL in order to only embed the file called name-of-file.ext (you can of course change the name to whatever the name of your file is). For example, if I wanted to embed the getGitContents.js file from the Gist at https://gist.github.com/westc/afac9258389fdfd2fdaf134ffaa0e923 I can use the following:

<script src="https://gist.github.com/westc/afac9258389fdfd2fdaf134ffaa0e923.js?file=getGitContents.js"></script>

In addition there is this YourJS blog post about this which allows you to enter your user name and see the embed codes for all of your gists and the underlying individual files.

0

Just for other people reference that might be looking into this.

If you are using Wordpress you may achieve this with the plugin oEmbed-gist and shortcode style:

[gist id="your-gist-id-here" file="your-file-name.js"].

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.