如何用新的 gist 界面嵌入来自 GitHub gist 的单个文件?

新的 GitHub Gist 接口为整个 Gist 提供了一个嵌入式代码片段,该代码片段将所有文件嵌入 Gist 中。旧的接口在要点中为每个文件嵌入了代码。有人知道嵌入单个文件的诀窍吗?

16942 次浏览

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>

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"].

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.

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.