Have you ever wanted to source a GitHub Gist within an <iframe>? Yesterday, I was writing a trainual document for work that needed to include Apex code which of course includes code that is misinterpreted as HTML ( eg. List<Object>…) after you save it and want to edit it again. According to this page, the suggested way to get around this issue is by using Pastebin. I honestly wanted to use GitHub Gists since as a developer I always use GitHub anway. Finally I found a way to embed a Gist as an <iframe>:
<iframe src="https://gist.github.com/westc/025d8ff780f8d524086ab44760fe9975.pibb"
style="width: 100%; height: 300px; border: 0; box-shadow: 0 0 1px #000;">
</iframe>
Do you see what I did? The URL to the Gist that I wanted to put in the <iframe> was https://gist.github.com/westc/025d8ff780f8d524086ab44760fe9975 so all I had to do was add “.pibb” as the extension and then the Gist was able to be embedded.
Embed A Specific File
It seems that you can also just include a specific file by specifying the file name as the “file” URL parameter:
<iframe src="https://gist.github.com/westc/025d8ff780f8d524086ab44760fe9975.pibb?file=sameSign.js"
style="width: 100%; height: 300px; border: 0; box-shadow: 0 0 1px #000;">
</iframe>
In this example all I did was include ?file=sameSign.js to indicate that all I want to appear in the <iframe> is the code for sameSign.js.
Conclusion
This may prove to be a useful solution but unfortunately I have not found any official documentation for this functionality by GitHub. If you find any documentation please let me know. Anyway, I hope this proves useful to others and as always, happy coding!!! š
