Example of how to embed a Gist on GitHub Pages using Jekyll.

gist.md

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

result.md

And here's what it would look like rendered:

The rendered output looks odd for the gist link

The rendered output looks odd for the gist link

I wonder if being meta makes this harder to understand.

I wonder if being meta makes this harder to understand.

gistception

gistception

Wow, this addition looks useful.

Wow, this addition looks useful.

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

Nice tip. forked.

Nice tip. forked.

Cool, thanks!

Cool, thanks!

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.

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.

very useful, thanks. 👯

very useful, thanks. 👯

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

Yes, it works and it's pretty!

Yes, it works and it's pretty!

What about for non-gists?

What about for non-gists?

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

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

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>

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>

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 :(

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 :(

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.

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.

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.

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.