CODEWITHSUNDEEP
githubmarkdown
Francisco Luz
Francisco Luz

Reputation: 2943

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

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

Something like:

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

Upvotes: 61

Views: 36629

Answers (5)

Michal
Michal

Reputation: 405

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.

Upvotes: 2

Dan
Dan

Reputation: 1995

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

Upvotes: 5

Nishant Srivastava
Nishant Srivastava

Reputation: 4791

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

Upvotes: 33

Gajus
Gajus

Reputation: 73998

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

Upvotes: 2

philipvr
philipvr

Reputation: 6388

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.

Upvotes: 33

Related Questions