Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


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


yarn add @justsml/gatsby-remark-embed-gist


// In your gatsby-config.js
  resolve: "gatsby-transformer-remark",
  options: {
    plugins: [
        resolve: "@justsml/gatsby-remark-embed-gist",
        options: {
          // the github handler whose gists are to be accessed
          username: "<string>",

          // ### Optional settings:

          // Useful if you are running into rate limit issues - DO NOT COMMIT DIRECTLY IN CODE, USE ENVIRONMENT VARIABLES INSTEAD!
          secretToken: process.env.GITHUB_TOKEN,

          // set to true to reduce output size 15-35%
          truncate: true || false, 

          // 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: "<string>"


Turns this…


Into this…

<div id="gist90436059" class="gist">
  <div class="gist-file">
    <div class="gist-data">
        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">
              class="highlight tab-size js-file-line-container"
                    class="blob-num js-line-number"
                    class="blob-code blob-code-inner js-file-line"
                    &lt;operation&gt; [n]&gt; /dev/null [options]
    <div class="gist-meta">
        >view raw</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 @justsml/gatsby-remark-embed-gist somewhere above this plugin.


MIT, by Patricio Trevino

Updated by Dan Levy, @justsml

© 2023 Gatsby, Inc.