Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of how to embed a Gist on GitHub Pages using Jekyll.

Here's an example of how to embed a Gist on GitHub Pages:

{% gist 5555251 %}

All you need to do is copy and paste the Gist's ID from the URL (here 5555251), and add it to a gist tag surrounded by {% and %}.

And here's what it would look like rendered:

Rendered Gist

@lowellk

This comment has been minimized.

Show comment
Hide comment
@lowellk

lowellk May 14, 2013

The rendered output looks odd for the gist link

lowellk commented May 14, 2013

The rendered output looks odd for the gist link

@Pyrolistical

This comment has been minimized.

Show comment
Hide comment
@Pyrolistical

Pyrolistical May 16, 2013

I wonder if being meta makes this harder to understand.

I wonder if being meta makes this harder to understand.

@zeke

This comment has been minimized.

Show comment
Hide comment
@zeke

zeke May 19, 2013

gistception

zeke commented May 19, 2013

gistception

@slice

This comment has been minimized.

Show comment
Hide comment
@slice

slice May 22, 2013

Wow, this addition looks useful.

slice commented May 22, 2013

Wow, this addition looks useful.

@attilaolah

This comment has been minimized.

Show comment
Hide comment
@attilaolah

attilaolah Jun 4, 2013

Is there a way to embed a single file? Yes there is!

{% gist 5555251 gist.md %}

Is there a way to embed a single file? Yes there is!

{% gist 5555251 gist.md %}
@kidlj

This comment has been minimized.

Show comment
Hide comment
@kidlj

kidlj Sep 14, 2013

Nice tip. forked.

kidlj commented Sep 14, 2013

Nice tip. forked.

@LeahCim

This comment has been minimized.

Show comment
Hide comment
@LeahCim

LeahCim Mar 30, 2014

Cool, thanks!

LeahCim commented Mar 30, 2014

Cool, thanks!

@abhiesa

This comment has been minimized.

Show comment
Hide comment
@abhiesa

abhiesa Aug 5, 2014

No solution, till end, what is cool, i don't understand.
Just contacted Github, and put this as a feature request.
Hope, that anybody sees this, will also do the same.

abhiesa commented Aug 5, 2014

No solution, till end, what is cool, i don't understand.
Just contacted Github, and put this as a feature request.
Hope, that anybody sees this, will also do the same.

@h4ckm03d

This comment has been minimized.

Show comment
Hide comment
@h4ckm03d

h4ckm03d Aug 7, 2014

very useful, thanks. 👯

h4ckm03d commented Aug 7, 2014

very useful, thanks. 👯

@Gowzancha

This comment has been minimized.

Show comment
Hide comment
@Gowzancha

Gowzancha Jul 11, 2015

is this feature still working guys? i couldn't get it to work!!

is this feature still working guys? i couldn't get it to work!!

@iplus26

This comment has been minimized.

Show comment
Hide comment
@iplus26

iplus26 Sep 26, 2015

Yes, it works and it's pretty!

iplus26 commented Sep 26, 2015

Yes, it works and it's pretty!

@ryanpcmcquen

This comment has been minimized.

Show comment
Hide comment
@ryanpcmcquen

ryanpcmcquen Nov 18, 2015

What about for non-gists?

What about for non-gists?

@hndr91

This comment has been minimized.

Show comment
Hide comment
@hndr91

hndr91 Sep 21, 2016

I've tried and it doesn't work. I just paste gist embed code on page and it work

hndr91 commented Sep 21, 2016

I've tried and it doesn't work. I just paste gist embed code on page and it work

@alejobit

This comment has been minimized.

Show comment
Hide comment
@alejobit

alejobit Oct 28, 2016

It works by installing https://github.com/jekyll/jekyll-gist

But I prefer to use:

<script src="https://gist.github.com/benbalter/5555251.js"></script>
<script src="https://gist.github.com/benbalter/5555251.js?file=gist.md"></script>

alejobit commented Oct 28, 2016

It works by installing https://github.com/jekyll/jekyll-gist

But I prefer to use:

<script src="https://gist.github.com/benbalter/5555251.js"></script>
<script src="https://gist.github.com/benbalter/5555251.js?file=gist.md"></script>
@ogurcan

This comment has been minimized.

Show comment
Hide comment
@ogurcan

ogurcan Mar 8, 2017

I tried to embed <script src="https://gist.github.com/benbalter/5555251.js"></script> and other examples in an .md file, however it doesnt work :(

ogurcan commented Mar 8, 2017

I tried to embed <script src="https://gist.github.com/benbalter/5555251.js"></script> and other examples in an .md file, however it doesnt work :(

@palevell

This comment has been minimized.

Show comment
Hide comment
@palevell

palevell Oct 9, 2017

This didn't work for me . . .
Error: Liquid syntax error (line 3): Unknown tag 'gist'

But, using the Embed code from the gist page worked, just fine.

palevell commented Oct 9, 2017

This didn't work for me . . .
Error: Liquid syntax error (line 3): Unknown tag 'gist'

But, using the Embed code from the gist page worked, just fine.

@weibeld

This comment has been minimized.

Show comment
Hide comment
@weibeld

weibeld Oct 29, 2017

Note that for this to work, you need to have the following in your Gemfile:

gem "github-pages", group: :jekyll_plugins

This installs, among others, the jekyll-gist gem which provides the {% gist %} tag. Without the jekyll-gist gem, Jekyll reports a Unknown tag 'gist' error when the site is built locally.

Of course, you could also have just gem "jekyll-gist" in your Gemfile, and the local build should work (and on GitHub Pages this gem is installed anyway). But if you're anyway deploying to GitHub Pages, it is much better to use the github-pages gem (which includes the jekyll-gist gem), as shown above, for the following reason:

The github-pages gem installs locally all the gems that are also installed on GitHub Pages, and the same versions of these gems. This ensures that your local build environment is the same as the build environment used on GitHub Pages. So, it is ensured that everything that works locally, will also work on GitHub Pages, and that the site will look the same on GitHub Pages as it looks on your local machine.

You basically don't need anything else than gem "github-pages", group: :jekyll_plugins in the Gemfile for best compatibility with GitHub Pages.

weibeld commented Oct 29, 2017

Note that for this to work, you need to have the following in your Gemfile:

gem "github-pages", group: :jekyll_plugins

This installs, among others, the jekyll-gist gem which provides the {% gist %} tag. Without the jekyll-gist gem, Jekyll reports a Unknown tag 'gist' error when the site is built locally.

Of course, you could also have just gem "jekyll-gist" in your Gemfile, and the local build should work (and on GitHub Pages this gem is installed anyway). But if you're anyway deploying to GitHub Pages, it is much better to use the github-pages gem (which includes the jekyll-gist gem), as shown above, for the following reason:

The github-pages gem installs locally all the gems that are also installed on GitHub Pages, and the same versions of these gems. This ensures that your local build environment is the same as the build environment used on GitHub Pages. So, it is ensured that everything that works locally, will also work on GitHub Pages, and that the site will look the same on GitHub Pages as it looks on your local machine.

You basically don't need anything else than gem "github-pages", group: :jekyll_plugins in the Gemfile for best compatibility with GitHub Pages.

@arefaslani

This comment has been minimized.

Show comment
Hide comment
@arefaslani

arefaslani Jun 26, 2018

Is there any way to link a revision of a gist file?

Is there any way to link a revision of a gist file?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment