Embed Partial Gist File

Asked 30/1, 2013 at 14:5 Answered 8/1, 2015 at 10:25

Solved javascript git github blogger gist

I have a gist setup here. I use the following code to embed a single file from my gist to a webpage.

<script src="https://gist.github.com/4672365.js?file=1.java" type="text/javascript"></script>

But what I want is to embed a single line from file 1.java. You can say that I want to embed only line #2 from file 1.java into my webpage. Thanks in advance for help :)

Ponderable answered 30/1, 2013 at 14:5 Comment(0)

After I got no helpful answers to this question, I tried myself to do some javascript coding. I have uploaded that code on github. The file on this link does the magic. To embed a single line into your webpage you need to add reference to my javascript file in HEAD tag. Here is a simple code.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
    <script type="text/javascript" src="https://github.com/kashif-umair/gist-embed/raw/feature/show_single_line/gist-embed.js" ></script>
  </head>
  <body>
    <code id="gist-<YOUR_GIST_ID>" data-file="<YOUR_FILE_NAME_IN_GIST>" data-line="<LINE_NUMBER>"></code>
  </body>
</html>

You need to replace YOUR_GIST_ID with the ID of your gist, YOUR_FILE_NAME_IN_GIST with the file name from which you want to embed the line and LINE_NUMBER with the line number in file which you want to embed.

NOTE:

If you want to embed a single line then both the file name and line number should be present in code tag.
If you want to embed multiple selective lines from a file then you should put values something like MS Word page ranges for printing. e.g. data-line="1-4,10,12-15". Please make sure that you used the correct syntax to put these values to avoid getting odd results.
If you want to embed whole file then remove the data-line attribute from code tag.

Hopefully I've helped for the people who have or will face this problem.

As I am continuously making changes to my javascript file so I think updating this answer every time is not a good idea at all. So from now I'll update the README.md file in the GitHub repository. Anyone having problems can visit the github to read README.md file. For reference I'm adding the link to my repository here.

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

P.S: Please take a look at my javascript file in the github repository and suggest any good practices for coding.

Alcoholic answered 30/1, 2013 at 14:5 Comment(3)

Nice! Seems like you are duplicating the whole gist concept, but I guess it may be useful to someone. It would be even more useful if you could specify a line range, like data-line="1-3". – Cornucopia 31/1, 2013 at 15:1

Yes, I am working on it too. The user will be be able to put values something like this. data-line="1-5,9,10,12". It should show lines 1,2,3,4,5,9,10,12 – Ponderable 31/1, 2013 at 18:59

@KirilRaychev, Just wanted to let you know that I have implemented that multi lines functionality in my javascript. I've also edited my answer accordingly :) – Ponderable 1/2, 2013 at 18:25

The Right and fastest way to do is just append the .js address with ?file=file.name : )

<script src="https://gist.github.com/kashif-umair/4672365.js?file=MyApplication.java"></script>

Inoculum answered 8/1, 2015 at 10:25 Comment(1)

What if I want to render line number 7 only from MyApplication.java file? – Ponderable 14/1, 2015 at 13:41

-1

Create a gist containing only the line you need.

Cornucopia answered 30/1, 2013 at 14:15 Comment(3)

Isn't there any other way? – Ponderable 30/1, 2013 at 16:26

@Alcoholic Gist is something very simple, don't make it more complicated. All you need to do is copy/paste one line of code. – Cornucopia 30/1, 2013 at 16:28

I have answered my own question. Please have a look at it and suggest any changes needed. – Ponderable 31/1, 2013 at 14:43

Recommended topics

Hot tags