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 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.
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!!! 😎