Customizable Github Gist Loader/Viewer - jQuery Gist Simple

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.