11

The question may seem confusing so let me clarify.

Github lets you see the source code of a files in a repo. I want to include them in iframes but am unsure how and suspect someone has already done this before.

In my case I want to add https://github.com/ileathan/hubot-mubot/blob/master/src/mubot.coffee to an iframe so that from my website people can see the code as it evolves.

6

A GitHub page itself wouldn't be put directly in a iframe (because of the X-Frame-Options: deny HTTP header).

That leaves you with the GitHub API for contents

GET /repos/:owner/:repo/contents/:path

Like: https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee.

You should be able to put that content in a iframe (as in this answer)

1
  • ITs 4:30 am i need to go to sleep so i cant check now, but is the returned content encrypted with my api key or is it just base64 encoded?? By the way thank you SO MUCH. Feb 5, 2015 at 12:38
5

I just found a way to do this using Gist-it

Usage

Take a github file url and prefix it with http://gist-it.appspot.com and embed the result within a tag:

<script src="http://gist-it.appspot.com/http://github.com/$file"></script>

Here's a test I just made. Works! :)

enter image description here

5

You'll need to hack the iframe and css a bit to get it to work without tags in your document, but it's possible:

https://www.arctype.co/blog/embedding-github-gists-via-iframe

 <iframe frameborder=0 style="min-width: 200px; width: 60%; height: 460px;" scrolling="no" seamless="seamless" srcdoc='<html><body><style type="text/css">.gist .gist-data { height: 400px; }</style><script src="https://gist.github.com/sundbry/55bb902b66a39c0ff83629d9a8015ca4.js"></script></body></html>'></iframe> 
0
5

Here's a concrete example of how this can be done via the GitHub API. We request the encoded content and insert it directly into the iframe.

<iframe id="github-iframe" src=""></iframe>
<script>
    fetch('https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee')
        .then(function(response) {
            return response.json();
        }).then(function(data) {
            var iframe = document.getElementById('github-iframe');
            iframe.src = 'data:text/html;base64,' + encodeURIComponent(data['content']);
        });
</script>

Here's the code in action https://jsfiddle.net/j8brpdsg/2/

1
  • Pretty nice, but if you are trying to embed some github code into your page, the API returns a mangled result like this: imgur.com/a/ycmZmlq. Dec 3, 2021 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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