Github：如何将Gist嵌入到README.md中？

Question

是否可以在存储在GitHub仓库中的README.md文件中嵌入gist？

像这样：

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

- Francisco Luz

Answer 1

不好意思，这是不可能的。你必须在README.md中有链接或者复制其内容。

Github Flavored Markdown会展示你可以在README.md文件中放置什么。

- philipvr

---

谢谢Philip，我希望自己在阅读文档时有所遗漏或者文档本身可能已经过时了。:-D不过如果能实现这个功能就太棒了。 - Francisco Luz

有一个已关闭的问题（https://github.com/github/markup/issues/199）请求添加这个功能。不幸的是，看起来它在短期内不会可用。 - mathielo

Answer 2

更新：我的答案适用于通过jekyll构建的github页面。我在markdown中使用脚本标签，然后由jekyll处理。

由于markdown支持html，因此可以简单地使用<script>标签来嵌入gist。

只需复制github提供的gist嵌入url即可。

将其复制并粘贴到您的Markdown文件中。

示例：复制以下内容并粘贴到您的Markdown文件中。

<script src="https://gist.github.com/nisrulz/11c0d63428b108f10c83.js"></script>

这就是你会得到什么

- Nishant Srivastava

---

使用GitHub markup (#2)：HTML已经过消毒处理，积极删除可能会对您和您的家人造成伤害的内容，例如脚本标签... - philipvr

@philipvr 同意那个文档，但这仍然有效并解决了 OP 的问题。 - Nishant Srivastava

这样做如何解决原贴作者的问题？如果您尝试在 GitHub 存储库的 readme.md 文件中嵌入 gist，嵌入的 gist 将不会显示。 - philipvr

@philipvr 我明白你指出的问题。我已经更新了我的答案，以反映适用于我的环境。 - Nishant Srivastava

这个技术的URL还可以接受一个可选参数作为文件名，?file=file_name_here。例如，<script src="https://gist.github.com/nisrulz/11c0d63428b108f10c83.js?file=test.sh"></script>。 - undefined

Answer 3

如果使用GitHub Pages和Jekyll主题，这在2017年是可行的：

请参见https://gist.github.com/benbalter/5555251（来自@benbalter）

只需简单地输入：{% gist 123456789 %}

- Dan

---

这个标记还接受一个可选的文件名参数，{% gist 5555251 gist.md %}。如果gist包含该文件名，则只会显示该文件名。 - undefined

Answer 4

如果你在使用Markdown预处理器，比如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);
                });
            });
        });
    }
});

然后在你的markdown中，你可以使用JSON hook来引用Gist，例如：

{"gitdown": "gist", "id": "d3e4212c799252bac5fa"}

这个功能应该在不久的将来成为Gitdown的一部分（有一个开放问题，https://github.com/gajus/gitdown/issues/7）。

- Gajus

Answer 5

一些人想要使用自动生成的代码片段使其在 GitHub 上的个人资料更具活力，例如活动框、生产力框等（此类内容的列表），因此可能会来到这里。但请注意，这些自动生成的代码片段不应添加到您专用的 README 文件中，而应使用“自定义您的 Pins”选项将其固定在您的个人资料页面上。

- Michal