Wednesday, 14 May 2014

How to show particular lines from gist ? 2

I tried to show selected lines of code from my gist to my blog. I got kashif-umair's Repository from GitHub. It's very easy to implement.

This plug-in using jQuery. So, you should load jQuery library. If you are going to use this in blog or website, You can use online CDN for both jQuery and gist-embed libraries like below,
Code usage is very simple. See the Syntax below,
See the example below,
You can enter line numbers in multiple combinations also like below,
The above example code will embed line numbers 1,2,3,6 in the same order. If lines are duplicated then they will be duplicated in code too.

If you don't data-showlinenumbers attribute your output will be like below
Here you see "1" at the beginning of code. To avoid this, you can use data-showlinenumber = "false" attribute.


If you don't use data-showfooter attribute, your output will be like below,

you can see, gist file name and "hosted with - by GitHub" content in that snippet. To avoid this, you can use data-showfooter = "false" attribute.

You know one thing? In this post I used that gist-embed library to show codes. really it's awesome.

Note: There is no documentation available to style this code snippet. In this blog post I used my own style. This gist code using gist-file class. So, I used the below style code to this,

You can find  's fork. This fork is having more additional features of highlight  particular lines of code. And you can find well structured documentation there.


Have any doubt, feel free to comment here!

2 comments: