'Can I embed source files from GitHub on my web page other than Gists?

Context

You can create a Gist on GitHub and embed it on your web page: embedding Gists.

This is an example of a randomly chosen Gist: tap.groovy.

Question

Is embedding also possible with other code files from GitHub, for example with this randomly chosen C# file ICommand.cs which is not a Gist?



Solution 1:[1]

You can use https://gist-it.appspot.com/:

<script src="http://gist-it.appspot.com/https://github.com/dotnet/corefx/blob/master/src/System.ObjectModel/src/System/Windows/Input/ICommand.cs"></script>

Solution 2:[2]

You can try https://emgithub.com, which does exactly what you want.

To embed the example file ICommand.cs in your question, you can just add "em" before "github.com" in the address bar, then press Enter.

Update (4/1/2020): I found that the file ICommand.cs in the question is no longer available so I use the file https://github.com/pytorch/pytorch/blob/master/torch/nn/cpp.py instead.

Open the link https://github.com/pytorch/pytorch/blob/master/torch/nn/cpp.py, you can simply add "em" before "github.com" in the address bar, then press Enter.

Using the default settings, you get the following script tag:

<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2Fpytorch%2Fpytorch%2Fblob%2Fmaster%2Ftorch%2Fnn%2Fcpp.py&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

You can also change its highlighting style, and some options like "line numbers", "file metadata" are available.

Unlike other websites that do similar work, EmGithub.com is a static site hosted on Github Pages. Fetching target files and highlighting are done on your browser.

Solution 3:[3]

There's a standard for embedding content from one website in another via a URL, called oEmbed. Unfortunately, GitHub is not a oEmbed provider, i.e. it doesn't support oEmbed for its URLs.

I found a proxy service, Oembed Proxy for GitHub, which adds oEmbed support for GitHub's code URLs. You pass a GitHub URL as a parameter to the proxy's URL and a resulting URL can be be pasted in another website, assuming that website supports embedding oEmbed links.

Another obstacle is that not every website supports embedding oEmbed URLs. According to the proxy's documentation, notion is one website that supports them. I did some research and looks like it should be possible to add oEmbed support to e.g. wordpress or jekyll.

This answer provides a very limited solution, due to small adoption of oEmbed. I thought it would be worth to spread the word nonetheless.

Solution 4:[4]

Another possible service is https://github.com/finom/github-embed. It seems to be unmainted by now for about 2 years, but gist-it seems to be unmaintained for even 6 years. I've tried neither, though.

Solution 5:[5]

You can use gistYard

<iframe src="https://gistyard.piyushdev.xyz/emd.html?lang=&from=0&to=&code=https://raw.githubusercontent.com/dotnet/corefx/master/src/System.ObjectModel/src/System/Windows/Input/ICommand.cs&edit=true&dm=off" width="100%" height="330" frameborder="0"></iframe>

It provides features like changing theme , cutting code directly from raw , edit mode , custom styling and others.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 m.s.
Solution 2
Solution 3 Jakub Kukul
Solution 4 sschuberth
Solution 5 PIYUSH PUNIYA