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

GithubMarkdown

Github Problem Overview


Is it possible to embed gists into README.md file that resides in a GitHub repository?

Something like:

<code id="gist-3167145"></code>

Github Solutions


Solution 1 - Github

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.

Solution 2 - Github

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

enter image description here

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

enter image description here

Solution 3 - Github

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).

Solution 4 - Github

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 %}

Solution 5 - Github

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFrancisco LuzView Question on Stackoverflow
Solution 1 - GithubphilipvrView Answer on Stackoverflow
Solution 2 - GithubNishant SrivastavaView Answer on Stackoverflow
Solution 3 - GithubGajusView Answer on Stackoverflow
Solution 4 - GithubDanView Answer on Stackoverflow
Solution 5 - GithubMichalView Answer on Stackoverflow