Gist Simple

JS for Gist code block loading.

Demo

Table of Contents

• Import Gist Simple
  • ESM
  • ESM CDN
  • UMD
  • UMD CDN
  • CJS (Bundlers like Webpack)
• Call the plugin
  • A. Data attribute way
  • B. JavaScript way
  • C. jQuery way
• Options
• For Developers

Import Gist Simple

Use one of the following examples to import Gist Simple.

ESM

We provide a version of Gist Simple built as ESM (gist-simple.esm.js and gist-simple.esm.min.js) which allows you to use Gist Simple as a module in your browser, if your targeted browsers support it.

<script type="module">
  import gistSimple from "gist-simple.esm.min.js";
</script>

ESM CDN

<script type="module">
  import gistSimple from "https://cdn.jsdelivr.net/npm/gist-simple@2/+esm";
</script>

UMD

Gist Simple may be also used in a traditional way by including script in HTML and using library by accessing window.gistSimple.

<link type="text/css" rel="stylesheet" href="gist-simple.css">
<script src="gist-simple.min.js"></script>

UMD CDN

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gist-simple@2/dist/gist-simple.css">
<script src="https://cdn.jsdelivr.net/npm/gist-simple@2/dist/gist-simple.min.js"></script>

CJS (Bundlers like Webpack)

Install Gist Simple as a Node.js module using npm

npm install gist-simple

Import Gist Simple by adding this line to your app's entry point (usually index.js or app.js):

import gistSimple from "gist-simple";

Call the plugin

A. Data attribute way

<div class="gist-simple" data-id="b58861072e53b12430ec2f78a99dbe4d" data-file="example-1.html"></div>

Note: You can use all available options as data attributes. For example: data-id, data-file, data-show-footer, etc...

B. JavaScript way

gistSimple(document.querySelector('.gist-simple'), {
  id: 'b58861072e53b12430ec2f78a99dbe4d',
  file: 'example-1.html',
});

C. jQuery way

$('.gist-simple').gistSimple({
  id: 'b58861072e53b12430ec2f78a99dbe4d',
  file: 'example-1.html',
});

No conflict (only if you use jQuery)

Sometimes to prevent existing namespace collisions you may call .noConflict on the script to revert the value of.

const gistSimplePlugin = $.fn.gistSimple.noConflict() // return $.fn.gistSimple to previously assigned value
$.fn.newGistSimple = gistSimplePlugin // give $().newGistSimple the Gist Simple functionality

Options

Name | Type | Default | Description :--- | :--- |:---------| :---------- id | string | | Gist ID. theme | string | `system` | Theme: `system`, `light`, `dark`. file | string | | Specific file name. caption | string | | Caption, that will be shown above code. lines | string | | Show only specific code lines. Example: "2", "1-5", "1,4", "1,4,6-8". linesExpanded | boolean | false | Hidden lines may be expanded. highlightLines | string | `` | Highlight specific code lines. Example: "2", "1-5", "1,4", "1,4,6-8". showFooter | boolean | true | Show footer section. showLineNumbers | boolean | true | Show line numbers section. enableCache | boolean | true | Enable AJAX caching.

For Developers

Installation

• Run npm install in the command line

Building

• npm run dev to run build and start local server with files watcher
• npm run build to run build

Linting

• npm run js-lint to show eslint errors
• npm run js-lint-fix to automatically fix some of the eslint errors