Github: How to embed a gist into README.md? - github

Question

Is it possible to embed gists into README.md file that resides in a GitHub repository?
Something like:
<code id="gist-3167145"></code>

Answer 1

No, sorry, that is not possible. You will have to either have a link to it in your README.md or copy its contents.
Github Flavored Markdown will show you what you can put in your README.md file.

Answer 2

Update : My answer works with github pages, built via jekyll. I use the script tags in markdown which is then processed by jekyll.
Since markdown supports html, one can simply use the <script> tag to embed gist.
Simply copy the embed url of the gist provided by github
..and paste it in you markdown file.
Example : Copy the below and paste in your markdown file.
<script src="https://gist.github.com/nisrulz/11c0d63428b108f10c83.js"></script>
..and this is what you will get

Answer 3

This is do-able in 2017 when using GitHub Pages and a Jekyll theme:
See https://gist.github.com/benbalter/5555251 from #benbalter
Simple as: {% gist 123456789 %}

Answer 4

You can do it if you are using a markdown preprocessor such as Gitdown:
/**
* Resolve Gist (https://gist.github.com/)
*
* #param {Object} config
* #param {String} config.id Gist ID.
* #param {String} config.fileName Gist file name. Default to gistfile1.txt.
*/
gitdown.registerHelper('gist', {
compile: function (config) {
config = config || {};
config.fileName = config.fileName || 'gistfile1.txt';
if (!config.id) {
throw new Error('Gist ID must be provided.');
}
return new Promise(function (resolve) {
var https = require('https');
https.get({
host: 'api.github.com',
path: '/gists/' + config.id,
headers: {
// User agent is required to communicate with Github API.
'user-agent': 'Gitdown – gist'
}
}, function(res) {
var body = '';
res.setEncoding('utf8');
res.on('data', function (d) {
body += d;
});
res.on('end', function () {
var gist = JSON.parse(body);
if (!gist.files) {
throw new Error('Gist ("' + config.id + '") not found.');
}
if (!gist.files[config.fileName]) {
throw new Error('File ("' + config.fileName + '") is not part of the gist ("' + config.id + '").');
}
resolve(gist.files['gistfile1.txt'].content);
});
});
});
}
});
Then in your markdown your would reference the Gist using a JSON hook, e.g.
{"gitdown": "gist", "id": "d3e4212c799252bac5fa"}
This feature should become part of the Gitdown in a near future (there is an open issue, https://github.com/gajus/gitdown/issues/7).

Answer 5

Some people will end up here due to the fact that they want to use auto-generated gists to make their profile on github more interesting with activity box, productive box, etc. (list of this stuff).
However, you should note that these auto-generated gists should not be added to your profile dedicated README file but should be pinned using the "Customize your pins" option on your profile page.