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 to an iframe so that from my website people can see the code as it evolves.
4 Answers
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 You should be able to put that content in a iframe (as in this answer)
1I just found a way to do this using Gist-it
Usage
Take a github file url and prefix it with and embed the result within a tag:
<script src=""></script>
Here's a test I just made. Works! :)
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:
<iframe frameborder=0 scrolling="no" seamless="seamless" srcdoc='<html><body><style type="text/css">.gist .gist-data { height: 400px; }</style><script src=""></script></body></html>'></iframe> 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 src=""></iframe> <script> fetch(') .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> 
