gist-simple

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.

$3

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.

``html

`

$3

`html

`

$3

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

`html


`

$3

`html


`

$3

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):

`javascript
import gistSimple from "gist-simple";
`

Call the plugin

$3


`html

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

$3

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

$3

`javascript
$('.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.

`javascript
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

$3

* Run npm install in the command line

$3

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

$3

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