Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weirdpattern/gatsby-remark-embed-gist
Gatsby remark gists preprocessor
https://github.com/weirdpattern/gatsby-remark-embed-gist
embedded gatsby gatsby-plugin gatsby-remark gatsbyjs gist plugin remark
Last synced: 4 months ago
JSON representation
Gatsby remark gists preprocessor
- Host: GitHub
- URL: https://github.com/weirdpattern/gatsby-remark-embed-gist
- Owner: weirdpattern
- License: mit
- Created: 2018-06-30T15:04:01.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:58:10.000Z (about 2 years ago)
- Last Synced: 2024-10-01T15:59:51.877Z (4 months ago)
- Topics: embedded, gatsby, gatsby-plugin, gatsby-remark, gatsbyjs, gist, plugin, remark
- Language: JavaScript
- Homepage:
- Size: 1.2 MB
- Stars: 30
- Watchers: 5
- Forks: 15
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-remark-embed-gist
[](https://www.npmjs.com/package/gatsby-remark-embed-gist)
[](https://travis-ci.org/weirdpattern/gatsby-remark-embed-gist)
[](https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist)
This plugin allows content authors to embed [Gist](https://gist.github.com/)
snippets.
## Getting started
To embed a Gist snippet in you markdown/remark content, simply add an inline code
block using the `gist:` protocol.
```md
`gist:[/]#`
`gist:[/]#?lines=`
`gist:[/]#?highlights=`
`gist:[/]#?highlights=&lines=`
`gist:[/]?file=`
`gist:[/]?file=?lines=`
`gist:[/]?file=?highlights=`
`gist:[/]?file=?highlights=&lines=`
```
Where:
- **username**, represents the github handler whose gist is to be accessed.
Can be defaulted via configuration.
- **gist_id**, is the id of the gist to be accessed.
This is the hash value in the gist url, e.g. https://gist.github.com//`ce54fdb1e5621b5966e146026995b974`).
- **gist_file**, is the name of the file in the gist to be accessed.
Highlights and lines can be defined using:
- A single number (e.g. `highlights=1`, `lines=1`)
- A list of numbers (e.g. `highlights=1,4`, `lines=1,4`)
- A range of numbers (e.g. `highlights=1-4`, `lines=1-4`)
- A combination of all above (e.g. `highlights=1,3,7-9`, `lines=1,3,7-9`)
## Installation
`yarn add gatsby-remark-embed-gist`
## Usage
```javascript
// In your gatsby-config.js
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-embed-gist",
options: {
// Optional:
// the github handler whose gists are to be accessed
username: "",
// a flag indicating whether the github default gist css should be included or not
// default: true
// DEPRECATED (PLEASE USE gistDefaultCssInclude)
includeDefaultCss: true || false,
// a flag indicating whether the github default gist css should be included or not
// default: true
gistDefaultCssInclude: true || false,
// a flag indicating whether the github default gist css should be preloaded or not
// use this if you want to load the default css asynchronously.
// default: false
gistCssPreload: true || false,
// a string that represents the github default gist css url.
// defaults: "https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
gistCssUrlAddress: ""
}
}
]
}
}
```
## Example
Turns this...
```md
`gist:weirdpattern/ce54fdb1e5621b5966e146026995b974#syntax.text`
```
Into this...
```html
<operation> [n]> /dev/null [options]
```
## Notes
The order of the plugins only matters when used in conjunction with
`gatsby-remark-prismjs`, because this plugin transforms the inline code blocks,
so add `gatsby-remark-embed-gist` somewhere above this plugin.
## License
MIT, by Patricio Trevino