Is There a Way to Embed Github Code into an Iframe?
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...
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
Like: .
You should be able to put that content in a iframe (as in this answer)
I 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 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=""></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 id="github-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>
Here's the code in action
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
