USE https://github.com/bvanderhoof/gist-embed instead
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.7.1/gist-embed.min.js"></script>
</head>Add an HTML element to your page with a data attribute in the following format, where <gist-id> should be replaced with the id of your gist:
<code data-gist-id="<gist-id>"></code>@itsNikolay Has created an easy to use ruby gem for gist-embed, you can find it here: https://github.com/itsNikolay/gist-embed-rails
@pasupulaphani Has created a small library to ease the use of gist-embed in your angular projects: https://github.com/pasupulaphani/angular-gist-embed
See http://blairvanderhoof.com/gist-embed/ for all possible ways to use gist-embed:
- Including a single gist
- Including individual files from a gist
- Including specific line numbers from a gist
- Including specific line numbers from a gist and collapse the others
- Add a caption (filename for example) to a gist
- Removing all line numbers from a gist
- Removing the footer from a gist
- Highlight lines from a gist
- You can put a single number like
"1", a range like"2-5", single line numbers separated with commas like"11,20", or a mix of both like"2-5,11,10-14,20". If you would like to collapse the others instead of hiding them, use thedata-gist-lines-expanded="true"option.
- It may be because the HTML element you are using has pre-existing styles either from the native browser or from a stylesheet include that you don't have control over.
- You can avoid this by using a generic HTML element such as
divinstead ofcodeas version 1.4 now targets all elements that have a data-gist-id attribute regardless of their tag name.
- Use the same pattern for line numbers as data-gist-line, but use the attribute data-gist-highlight-line
- Now you can customize the caption!
- https://github.com/blairvanderhoof/gist-embed/pull/65
- Thanks @stefanbauer!
- Now you can collapse lines!
- https://github.com/blairvanderhoof/gist-embed/pull/60
- Thanks @stefanbauer!
- Now you can enable caching with data-gist-enable-cache="true". Future requests of the same gist won't hit the server!
- https://github.com/blairvanderhoof/gist-embed/pull/55
- Thanks @kiran3807
- Merged pull request https://github.com/blairvanderhoof/gist-embed/pull/53
- You can now specify a callback when your gist is finished loading. Thanks @jackycute!
- Merged pull request https://github.com/blairvanderhoof/gist-embed/pull/46
- Fixes global var bug and adds 'use strict' to show linter warnings and hopefully prevent future errors. Thanks @bardzusny!
- Merged pull request https://github.com/blairvanderhoof/gist-embed/pull/45
- This gives the option of showing a loading spinner icon instead of loading text. Thanks @dnlvgl!
- BREAKING CHANGE: Github messed with the api, if you are using version <= 2.1, your gists will be unstyled. This fixes issue #39.
- Support line numbers with new format. Thanks @tellibus https://github.com/blairvanderhoof/gist-embed/pull/40
- You can now add
data-gist-show-loading="false"to prevent the "Loading..." text from showing when the gist is created.
- Merged #29 from steinwaywhw to remove the bottom border when the footer is hidden. Thanks steinwaywhw!
- Merged #25 from scottdorman to use jQuery.data to parse data attributes instead of jQuery.attr. This provides compatibility with knockout bindings. Thanks scottdorman!
- Merged #22 from miguelvps to expose gist-embed as a jQuery plugin. Now you can add new gist-embed elements after the page has loaded. Thanks miguelvps!
- Merged pull request https://github.com/blairvanderhoof/gist-embed/pull/20 to highlight lines first before filtering. Thanks Microdog!
- Allow private gists by not checking the type of id passed in as private gists can start with letters or numbers
- Print error statement to html for easier debugging
- You can now highlight individual lines with the same syntax used in
data-gist-linebut now using thedata-gist-highlight-lineattribute- Merged and cleaned up https://github.com/blairvanderhoof/gist-embed/pull/16
- Thanks https://github.com/luanmuniz !
- Added a test.html for easier testing
- Fixed some lingering issues with linting such as a global 'head' variable, and mixed double vs. single quotes.
- Changed to use
$("[data-gist-id]")as a more general selector that works with any element, not justcodetags. Performance should not be affected: http://jsperf.com/gist-embed
- Github changed their stylesheet property to be relative instead of absolute. Updated gist-embed accordingly to allow for these kinds of changes in the future.
- Breaking change:
- Removed code elements with id attributes of
gist-from being parsed. You must usedata-gist-idand specify an integer specifying the id of your gist. - Do not use
gist-for the value ofdata-gist-id, only the value of the gist id is needed. - Rewrote the data attribute names. Now all attributes are using a
data-gist-namespace for all attributes. Please see example.html for options. - Do not point directly to gist-embed from github. Host your own version so that if breaking changes are introduced, your websites won't be affected.
- Removed code elements with id attributes of
- Breaking change:
- Using the id attribute of your code element to specify the gist id is no longer accepted. You must now use a data attribute to specify the gist id. See above for an example.
- The reason for this change is that it is not proper HTML markup to have multiple DOM elements with the same id attribute on the same page and that it could lead to conflicts when including the same gist in multiple areas.
- For the meantime, I will allow for both methods so anyone using this code from github directly won't have broken gists on their page. I plan to deprecate this in the next month.
- Other changes:
- Cleaned up example.html to include all possible ways to use gist-embed.
- Thanks to https://github.com/kashif-umair for providing a way to remove the gist footer, remove all line numbers, and specify line number ranges.