Friday, May 1, 2020

Embedding a single file from a github gist

Embedding a github gist

Github has improved their gists by directly providing an embed script.

This is pretty handy. From the sharing dropdown on the gist, choose embed and then copy the script tag. Paste that directly into your html (say on your super minimal blogging platform, like blogger/blogspot).

The script will embed the gist with syntax highlighting and links to view the raw gist.

Format of the script tag:
<script src="${username}/${gist_id}.js"></script>

username is optional and can be skipped:
<script src="${gist_id}.js"></script>

Embedding a single file from a gist

When our gist contains multiple files, the default embed will include all of the files. (Sorted by filename, just like in the gist). You can embed just a single file by adding the filename to a file get param.

Format of the script tag:
<script src="${username}/${gist_id}.js?file=${filename}"></script>

The username path can be skipped:

<script src="${gist_id}.js?file=${filename}"></script>

Embedded file example

Embedding from file from my gist 23727a722bff54fd20f44ef43b96466b

<script src=""></script> 


Matthew Persico said...

After googling around for a while, I found this post and applied it here:

Thank you!

Anonymous said...

Thanks!!! 👏👏👏