'View rendered output of a gist?
I'm sure I'm being dim, but is it possible to view the rendered output of a gist?
This is the gist I'm interested in: https://gist.github.com/844752/420cc52eb4910fe8fa2bec9e13daab18b6230503
Where can I see how it actually renders?
githubSolution 1:[1]
As far as I know gist doesn't provide an execution environment, but you could easily paste this in jsfiddle.
Solution 2:[2]
rawgit.com provides this service. To use rawgit.com, simply replace the domain of the raw view of the gist or github file you want to view with rawgit.com. For example:
https://gist.githubusercontent.com/mbostock/844752/raw/index.html
to
https://rawgit.com/mbostock/844752/raw/index.html
or
https://raw.githubusercontent.com/caffinatedmonkey/Hello-World-PSP/master/main.cpp
to
https://rawgit.com/caffinatedmonkey/Hello-World-PSP/master/main.cpp
Solution 3:[3]
RawGithub.com will let you render anything on Github, including gists. Two examples:
Solution 4:[4]
I'm under the impression the way to render a gist has recently changed. Here is the solution I have found :
- go to http://rawgit.com/, paste the adress of your gist and get the adress to the raw html code - or click on the raw button in Github
- prepend to the URL:
http://htmlpreview.github.io/?
Example
- link to a gist: https://gist.github.com/stla/9007180
- link generated by rawgit.com: https://rawgit.com/stla/9007180/raw/ or link by pressing the raw button: https://gist.githubusercontent.com/stla/9007180/raw/
- link to the rendered version: http://htmlpreview.github.io/?https://rawgit.com/stla/9007180/raw/ or http://htmlpreview.github.io/?https://gist.githubusercontent.com/stla/9007180/raw/
Solution 5:[5]
Mike Bostock made a cool application to render Gists: http://bl.ocks.org/844752/420cc52eb4910fe8fa2bec9e13daab18b6230503
Still, I'm interested how this is done technically. GitHub has a cool api through which you can get gist data as JSON: https://api.github.com/gists/844752/420cc52eb4910fe8fa2bec9e13daab18b6230503 It includes the files and their raw contents. I don't know how to render it dynamically as if they were actual files on a filesystem.
Solution 6:[6]
2020 Update: RawGit is shutting down. Alternatives and tests:
To preview your gists as rendered HTML, use one of the services below:
rawgit.com(obsolete)- raw.githack.com (WARNING: injects JavaScript to your page!)
- gitcdn.xyz
- gistcdn.rawgit.org
- htmlpreview.github.io (this is not a proxy, it loads your page via AJAX on the frontend)
All of those were tested with HTML gists on GitHub and are working as of July 2020.
Tests
Examples using this gist:
Check to see if it still works and how the URLs look like:
rawgit.com (doesn't work as of July 2020)
gist.githack.com
Warning: It injects JavaScript to your page! See:
curl https://gist.githack.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html
Output:
<!-- Valid HTML Test -->
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>Valid HTML Test</title>
<script>
alert('It works');
</script>
<script async src='/cdn-cgi/bm/cv/2172558837/api.js'></script><script type="text/javascript">(function(){window['__CF$cv$params']={r:'5b1aaf571d8bf2c0',m:'65442fcb36a12a3fd4d99294f0ae0a2c6c071945-1594556076-1800-AdUTDXjrrqS1ZqgeCevOb/vrvZSZaBf8uXiIHtYhab+Pu1AhAHEnvoPv7d6apyJwU+p7FNPWY8VQAjdSpjC5/5JRJKo5Og1S5Qod6jctf3ECBmhA7mctVQJOrzVBXkf2fZrHHOVjSD5cezyUp1zDZeSLAYtov29CfJKdbN7/gstPjgYcF/FbgiA5tm4WJ/ToqDwoSGljZwlHIrqr9EdLCecSgQO1D+ASFBtWOduqNIx9',s:[0x603d28608f,0x9fc0e2444b],}})();</script>
The last two script tags are not mine! I noticed it because the HTML Validator is giving me warnings for a perfectly valid HTML (so it not only injects code, but an invalid one at that...)
gitcdn.xyz
Doesn't seem to change the HTML:
curl -v https://gitcdn.xyz/cdn/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html
gistcdn.rawgit.org
Note: the URL doesn't contain /raw/ like all the others so it's easy to misspell the URL if you construct it manually.
htmlpreview.github.io
Warning:
They seem to differ in regards to:
- some are proxy, some work with AJAX on the frontend
- changing the actual HTML like injecting scripts, see my warnings above
File integrity
I wrote this script to check the SHA1 sums of the served HTML:
#!/bin/bash
for i in \
'https://gist.githubusercontent.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
'https://gist.githack.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
'https://gitcdn.xyz/cdn/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
'https://gistcdn.rawgit.org/rsp/dd2481a75c1668846a752e24099ce020/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
'https://htmlpreview.github.io/?https://gist.githubusercontent.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
;do
n=`echo $i | sed 's|^[a-z:]*//||; s|/.*||'`
s=`curl -s $i | shasum`
echo $s $n
done
Feel free to use it to test the integrity of your own gists if needed. Remember that even if one of the proxies doesn't inject anything or mess with your code right now, it doesn't mean that it will never do it.
My result was:
7a785588d5806469a7a9256968f82257accd7183 - gist.githubusercontent.com
809819224097b5f116b63fd6019cb490005d1ff8 - gist.githack.com
7a785588d5806469a7a9256968f82257accd7183 - gitcdn.xyz
7a785588d5806469a7a9256968f82257accd7183 - gistcdn.gistcdn.rawgit.org
5069f27b01308f3cf71c9d7f3a5c924e3a91b243 - htmlpreview.github.io
The first one is the original, so it seems that:
- gitcdn.xyz and rawgit.org serve the original file
- githack.com injects scripts into your page! (a git hack indeed...)
- htmlpreview.github.io works on the frontend so serves a different page that loads and displays your gist using a logic on the frontend (I wonder if it would work for relative links and images - I'll have to test it later).
Note on htmlpreview.github.io
Interestingly enough, it works using another service, a JSONP proxy jsonp.afeld.me and loads your gist not directly from GitHub but as: https://jsonp.afeld.me/?url=https://gist.githubusercontent.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html
Other ideas
I just got an idea to see if gh-pages can be somehow made to work with gists (because gists can be checkout as repos). I'll test it and write an update. Update: I wasn't able to make it work. Nor could I deploy from a gist to Netlify.
Solution 7:[7]
Gist renders output (currently after updating gist, not live preview).
This works only with proper file extension.
For example, if your file is formatted as MediaWiki, you have to edit the file name as somefile.mediawiki
Solution 8:[8]
You can do it right in GitHub. I simply use the comment section as it already has its own 'Preview' option, and of course "Styling with Markdown is supported".
Solution 9:[9]
For people visiting in 2022, the solution that worked for me is https://bl.ocks.org/-/about
Bl.ocks (pronounced “Blocks”) is a simple viewer for sharing code examples hosted on GitHub Gist. For example, if your Gist URL is:
https://gist.github.com/mbostock/1353700
Replace “gist.github.com” with “bl.ocks.org” in the URL to view it:
https://bl.ocks.org/mbostock/1353700
The main source for your example is in index.html. This file can contain relative links to other files in your Gist, such as images, scripts or stylesheets. And of course you can use absolute links, such as CDN-hosted D3, jQuery or Leaflet. To explain your example, add a README.md written in Markdown. (You can omit the index.html if you just want to write, too.)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Manu Clementz |
| Solution 2 | 0xcaff |
| Solution 3 | Dee Newcum |
| Solution 4 | |
| Solution 5 | Danny_Joris |
| Solution 6 | Jeroen Wiert Pluimers |
| Solution 7 | Max |
| Solution 8 | BaSsGaz |
| Solution 9 | Stvad |