CODEWITHSUNDEEP
githubgist
Lernkurve
Lernkurve

Reputation: 21532

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?

Upvotes: 54

Views: 35029

Answers (7)

Seyacat
Seyacat

Reputation: 31

Ayan Mullick answer is the best, but here resolve little issue with jumpline taked from here How to escape HTML

fetch(
        "https://raw.githubusercontent.com/seyacat/reactive/master/test/basictest.html"
      )
        .then((response) => response.text())
        .then((data) => {
          console.log(data);
          document.getElementById("code").innerHTML = new Option(data).innerHTML
            .replace(/\n/g, "<br>")
            .replace(/\s\s/g, "&nbsp;&nbsp;");
        });

Upvotes: 1

PIYUSH PUNIYA
PIYUSH PUNIYA

Reputation: 33

You can use gistYard

<iframe src="https://piyush-hack.github.io/gistYard/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.

Upvotes: 2

Ayan Mullick
Ayan Mullick

Reputation: 162

One could just fetch the file to embed on one's website.

fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1")
      .then(response => response.text())
      .then(data => document.getElementById('code').textContent = data)
<pre id="code"></pre>

Upvotes: 5

yusanshi
yusanshi

Reputation: 630

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.

Then you can get a script tag like this:

<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fdotnet%2Fcorefx%2Fblob%2Fmaster%2Fsrc%2FSystem.ObjectModel%2Fsrc%2FSystem%2FWindows%2FInput%2FICommand.cs&style=default&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

Note if you simply click Run code snippet in StackOverflow, the copying button at top right corner may not work. Running it outside SO would work fine.

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.

Disclosure: I'm the developer of it :)

Upvotes: 50

Jakub Kukul
Jakub Kukul

Reputation: 14494

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.

Upvotes: 6

sschuberth
sschuberth

Reputation: 29821

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.

Upvotes: 2

m.s.
m.s.

Reputation: 16334

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>

Upvotes: 14

Related Questions