Gatsby remark gists preprocessor fork for https://github.com/weirdpattern/gatsby-remark-embed-gist/pull/1
Last updated 2 years ago by danpalmer .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @danpalmer/gatsby-remark-embed-gist 
SYNC missed versions from official npm registry.


NPM badge Travis badge codecov

This plugin allows content authors to embed Gist snippets.

Getting started

To embed a Gist snippet in you markdown/remark content, simply add an inline code block using the gist: protocol.





  • 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/<username>/ce54fdb1e5621b5966e146026995b974).
  • gist_file, is the name of the file in the gist to be accessed.

Highlights can be defined using:

  • A single number (e.g. highlights=1)
  • A list of numbers (e.g. highlights=1,4)
  • A range of numbers (e.g. highlights=1-4)
  • A combination of all above (e.g. highlights=1,3,7-9)


yarn add gatsby-remark-embed-gist


// 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: 'weirdpattern',

          // a flag indicating whether the github default gist css should be included or not
          // default: true
          includeDefaultCss: true


Turns this...


Into this...

<div id="gist90436059" class="gist">
    <div class="gist-file">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container file-box">
          <div id="file-syntax-text" class="file">
            <div itemprop="text" class="blob-wrapper data type-text">
              <table class="highlight tab-size js-file-line-container" data-tab-size="8">
                    <td id="file-syntax-text-L1" class="blob-num js-line-number" data-line-number="1"></td>
                    <td id="file-syntax-text-LC1" class="blob-code blob-code-inner js-file-line">&lt;operation&gt; [n]&gt; /dev/null [options]</td>
      <div class="gist-meta">
        <a href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text" style="float:right">view raw</a>
        <a href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text">syntax.text</a>
        hosted with ❤ by <a href="https://github.com">GitHub</a>


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.


MIT, by Patricio Trevino

Current Tags

  • 1.1.3                                ...           latest (2 years ago)

2 Versions

  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 0
Dependencies (6)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |