gist-simple v2.1.0
Gist Simple
JS for Gist code block loading.
Demo
Table of Contents
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 watchernpm run build
to run build
Linting
npm run js-lint
to show eslint errorsnpm run js-lint-fix
to automatically fix some of the eslint errors