How to embed only certain lines from a gist?

Question

Gist lets you embed a gist in a web page:

<script src="https://gist.github.com/dyoo/4627246.js"></script>

I was hoping I could have it display just a line range subset. (Use case: Write some code for a blog post in a single gist. Reference certain lines throughout the blog post discussing those lines.)

Is this possible? I can't find it documented, but is there some way to do it?

---

As an example of how I thought it might work, GitHub supports URIs with line numbers. For example, the #L4-L8 anchor in this:

https://github.com/twitter/bootstrap/blob/master/docs/base-css.html#L4-L8

I realize GitHub shows all lines with just those lines highlighted. Whereas I'm asking how to show just certain lines from a Gist. I mention this just for-example, how I guessed it might work.

---

p.s According to How do I embed a single file from a GitHub gist with the new gist interface?, it sounds like this recently moved in the opposite direction from what I'm asking: The ability to embed just one file from a gist recently disappeared. I want to display just certain lines from just one file. But I wanted to ask anyway. Also I think this is a distinct question from that, which is why I posted this instead of commenting the existing question.

Answer 1

Gist API doesn't provide any such way to embed part of a gist. However you can do it yourself with javascript in your end. there is a good library you can use:

https://github.com/kashif-umair/gist-embed/

You can embed parts of a gist with this.

Answer 2

What you need is this:

http://gist-it.appspot.com/

# Embed the file robertkrimen/gist-it-example/example.js
<script src="http://gist-it.appspot.com/github/robertkrimen/gist-it-example/blob/master/example.js"></script>

# Embed without a footer
<script src="http://gist-it.appspot.com/github/robertkrimen/gist-it-example/blob/master/example.js?footer=0"></script>

# Show only the first and second line
<script src="http://gist-it.appspot.com/github/robertkrimen/gist-it-example/blob/master/example.js?slice=0:1"></script>

Answer 3

There is a way to do it without libraries

Copy the embed and append to the src attribute the following ?file=the-name-of-your-file

---

A real example

The gist is https://gist.github.com/dianjuar/8df3873cd9db49b7fcd86e74b57dd848

So, to show in an embed only the file called circleci-useful-env-variables-pr.sh, I must

<script src="https://gist.github.com/dianjuar/8df3873cd9db49b7fcd86e74b57dd848.js?file=circleci-useful-env-variables-pr.sh"></script>