Customizable Github Gist Loader/Viewer - jQuery Gist Simple
File Size: | 123 KB |
---|---|
Views Total: | 410 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The traditional way to embed a Github gist into your page is to copy and paste the embed code in any text field that supports Javascript:
<script src="https://gist.github.com/USERNAME/GIST.js"></script>
Gist Simple is a jQuery plugin for developers that dynamically load Github gists via AJAX and embed them into customizable code blocks within your website or blog post.
Features:
- Shows/hides caption bar.
- Shows/hides line numebrs.
- Shows/hides footer.
- Line highlighting.
- Shows specific lines.
How to use it:
1. Installation & download.
# NPM $ npm install gist-simple --save
2. Import the Gist Simple's JavaScript and CSS files into the document.
<link href="dist/gist-simple.css" rel="stylesheet"> <script src="/path/to/jquery.min.js"></script> <script src="dist/gist-simple.js"></script>
3. Embed a basic Github gist into the page by specifying the gist ID & file name using the following data
attributes.
<div class="gist-simple" data-id="984abb89b0bbbb99b9bd9870c75bcd14" data-file="isArray.js"> </div>
4. Add a custom caption bar to the gist.
<div class="gist-simple" data-id="984abb89b0bbbb99b9bd9870c75bcd14" data-file="isArray.js" data-caption="jQueryScript.Net"> </div>
5. Show only the specified line(s) and collapse the hidden line(s).
<div class="gist-simple" data-id="984abb89b0bbbb99b9bd9870c75bcd14" data-file="isArray.js" data-lines="1,3"> </div>
6. Hide the footer section.
<div class="gist-simple" data-id="984abb89b0bbbb99b9bd9870c75bcd14" data-file="isArray.js" showFooter="false"> </div>
7. Highlight specific lines.
<div class="gist-simple" data-id="984abb89b0bbbb99b9bd9870c75bcd14" data-file="isArray.js" data-highlight-lines="2-6"> </div>
8. Hide the line numbers.
<div class="gist-simple" data-id="984abb89b0bbbb99b9bd9870c75bcd14" data-file="isArray.js" showLineNumbers="false"> </div>
9. Disable the AJAX caching.
<div class="gist-simple" data-id="984abb89b0bbbb99b9bd9870c75bcd14" data-file="isArray.js" enableCache="false"> </div>
10. You can also initialize the plugin and pass the options via JavaScript.
$('.gist-simple').gistsimple({ id: '', file: '', caption: '', lines: '', linesExpanded: false, highlightLines: '', showFooter: true, showLineNumbers: true, enableCache: true, });
11. Callback functions.
$('.gist-simple').gistsimple({ onInit: null, // () => {} onInitEnd: null, // () => {} onDestroy: null, // () => {} onDestroyEnd: null, // () => {} onAjaxBeforeSend: null, // () => {} onAjaxSuccess: null, // (response) => {} onAjaxLoaded: null // () => {} });
This awesome jQuery plugin is developed by nk-o. For more Advanced Usages, please check the demo page or visit the official website.