Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nk-o/gist-simple
JS for Gist code blocks loading
https://github.com/nk-o/gist-simple
block code gist
Last synced: 3 months ago
JSON representation
JS for Gist code blocks loading
- Host: GitHub
- URL: https://github.com/nk-o/gist-simple
- Owner: nk-o
- License: mit
- Created: 2019-05-23T09:25:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T06:33:52.000Z (8 months ago)
- Last Synced: 2024-07-09T14:38:50.065Z (6 months ago)
- Topics: block, code, gist
- Language: JavaScript
- Homepage: https://codepen.io/_nK/pen/KLQZqr
- Size: 394 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Gist Simple
JS for Gist code block loading.
## [Demo](https://codepen.io/_nK/pen/KLQZqr)
## Table of Contents
- [Import Gist Simple](#import-gist-simple)
- [ESM](#esm)
- [ESM CDN](#esm-cdn)
- [UMD](#umd)
- [UMD CDN](#umd-cdn)
- [CJS (Bundlers like Webpack)](#cjs-bundlers-like-webpack)
- [Call the plugin](#call-the-plugin)
- [A. Data attribute way](#a-data-attribute-way)
- [B. JavaScript way](#b-javascript-way)
- [C. jQuery way](#c-jquery-way)
- [Options](#options)
- [For Developers](#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](https://caniuse.com/es6-module).
```html
import gistSimple from "gist-simple.esm.min.js";
```
### ESM CDN
```html
import gistSimple from "https://cdn.jsdelivr.net/npm/gist-simple@2/+esm";
```
### UMD
Gist Simple may be also used in a traditional way by including script in HTML and using library by accessing `window.gistSimple`.
```html
```
### UMD CDN
```html
```
### 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`):
```javascript
import gistSimple from "gist-simple";
```
## Call the plugin
### A. Data attribute way
```html
```
Note: You can use all available options as data attributes. For example: `data-id`, `data-file`, `data-show-footer`, etc...
### B. JavaScript way
```javascript
gistSimple(document.querySelector('.gist-simple'), {
id: 'b58861072e53b12430ec2f78a99dbe4d',
file: 'example-1.html',
});
```
### C. jQuery way
```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
### 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