Skip to content
GatsbyJS plugin to replace links to GitHub files in Markdown files with the actual content of those files
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.eslintignore
.eslintrc.js
.gitignore
README.md
commitlint.config.js
index.js
package.json
release.config.js
yarn.lock

README.md

gatsby-remark-github

npm CircleCI

This is a plugin for gatsby-transformer-remark, which is in turn a plugin for GatsbyJS. This plugin is a simple wrapper around the remark-github-plugin, which replace links to GitHub files in Markdown files with the actual content of those files, wrapped in Markdown code blocks that can optionally be further processed by a syntax highlighter (e.g. gatsby-remark-prismjs). For more details on how this package came about, you can read about its development process in my series of blog posts.

Installation

# npm:
npm install remark-github-plugin gatsby-remark-github
# or yarn:
yarn add remark-github-plugin gatsby-remark-github

Note: You need to install remark-github-plugin along with this package because it is a peer dependency.

Usage:

First, create a GitHub personal access token with the public_repo scope (if you only need to access public repos) or repo scope (if you need to also access private repos).

If you haven't already installed gatsby-transformer-remark, you should install it. If you want to have syntax highlighting by PrismJS, install gatsby-remark-prismjs as well.

Then in your gatsby-config.js, add this plugin to the list of plugins for gatsby-transformer-remark, preferably as the first one but definitely before gatsby-remark-prismjs:

module.exports = {
  // other configs ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-github',
            options: {
              marker: 'GITHUB-EMBED',
              insertEllipsisComments: true,
              ellipsisPhrase: '...',
              useCache: true,
              cacheKey: 'gatsby-remark-github-v1',
              token: '<Your Github Token, preferably read from an environment variable>',
            }
          },
          // ... other plugins ...
          'gatsby-remark-prismjs',
        ]
      }
    }
  ]
}

For sample input and output, please refer to the usage section of remark-github-plugin. You can also find a full real-world setup in this repo.

Configuration

This plugin takes the exact same configuration as that of remark-github-plugin.

You can’t perform that action at this time.