diff --git a/README.md b/README.md index 1dad78e..073f398 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,31 @@ ##How to use gist-embed to spice up code snippets on your blog -### Include jQuery: +### Include jQuery and gist-embed: - - -### Include gist-embed (If your blog doesn't accept local file includes, then simply copy paste the contents into a script tag): + You should include them in your HEAD tag for better performance - + + ### Add a code element to your page with an id attribute in the following format: "gist-" - e.g.: - - \ No newline at end of file +### To embed the whole gist you should put this code element in your body where ever you want it to be displayed. + +### To embed a single file from gist, add the data-file attribute to your code element like this. + +### To embed a single line of a file from gist, add the data-line attribute to your code element like this. + + + This will embed only line number 5. +### To embed multiple lines of a file from gist, change the data-line attribute's value to something like MS Word printing page ranges. e.g. + + + This will embed line numbers 2,3,4,5,10,11,12,13,14,11,20 in the same order. If lines are duplicated then they will be duplicated in code too. + +#### If you are embedding multiple lines then make sure about following points. + + - You can put a range like "2-5", or single line numbers separated with commas like "11,20", or mix of both like "2-5,11,10-14,20" + - Spaces are not allowed in data-line value + +#### Follow the above instructions to avoid getting any undesired results. diff --git a/gist-embed.js b/gist-embed.js index 169c53d..ffee6f0 100644 --- a/gist-embed.js +++ b/gist-embed.js @@ -60,7 +60,6 @@ $(function(){ if(line){ var lineNumbers = getLineNumbers(line); - $('#' + random).find('.line').each(function(index){ if(($.inArray(index + 1, lineNumbers)) == -1){ $(this).remove(); @@ -113,4 +112,4 @@ function getLineNumbers(lineRangeString){ } } return lineNumbers; -} +} \ No newline at end of file