# to-gatsby-remark-plugin

> Convert remark plugins to gatsby remark plugins

Latest version **0.1.0** (published 2020-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install to-gatsby-remark-plugin
pnpm add to-gatsby-remark-plugin
yarn add to-gatsby-remark-plugin
bun add to-gatsby-remark-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-04-22 |
| First published | 2020-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Kai Hao |
| Maintainers | kevin940726 |

## Links

- npm: https://www.npmjs.com/package/to-gatsby-remark-plugin
- Repository: https://github.com/kevin940726/to-gatsby-remark-plugin
- Homepage: https://github.com/kevin940726/to-gatsby-remark-plugin#readme
- Issues: https://github.com/kevin940726/to-gatsby-remark-plugin/issues
- npm.io page: https://npm.io/package/to-gatsby-remark-plugin

## Dependencies (1)

- [to-vfile](https://npm.io/package/to-vfile.md) ^6.1.0

## Recent versions

- 0.1.0 (latest) — 2020-04-22

## README

# `to-gatsby-remark-plugin`

Convert remark plugins to gatsby remark plugins.

## Installation

```sh
yarn add to-gatsby-remark-plugin
# npm install to-gatsby-remark-plugin
```

## Why

**Remark plugins** are plugins that can be used with [`remark`](https://remark.js.org/) ([`unifiedjs`](https://unifiedjs.com/)), there are already tons of [plugins](https://github.com/remarkjs/remark/blob/master/doc/plugins.md) in the community. **Gatsby remark plugins** are plugins that can only be used in Gatsby, which is capable of using some of the Gatsby's specific APIs and graphql interfaces. However, we don't usually need all those APIs in our **remark plugins**, sometimes the plugins just have to manipulate the AST.

[`gatsby-transformer-remark`](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/#how-to-use) only supports passing **Gatsby remark plugins**. [`gatsby-plugin-mdx`](https://www.gatsbyjs.org/packages/gatsby-plugin-mdx) supports both **Gatsby remark plugins** and **remark plugins** with [`gatsbyRemarkPlugins`](https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/#gatsby-remark-plugins) and [`remarkPlugins`](https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/#remark-plugins) options separately. However, `gatsbyRemarkPlugins` always have precedence over `remarkPlugins`, which makes it difficult to compose multiple plugins in specific order.

As a result, plugin authors tend to re-create a **Gatsby remark plugin** for every **remark plugin**. This is far from ideal. What if we can just convert our **remark plugins** into **Gatsby remark plugins** automatically? This is exactly what this package does!

## Usage

### For users

Create a file locally with the following code.

```js
// gatsby-my-remark-plugin.js
const toGatsbyRemarkPlugin = require('to-gatsby-remark-plugin');
const myRemarkPlugin = require('my-remark-plugin');

module.exports = toGatsbyRemarkPlugin(myRemarkPlugin);
```

Reference this file when specifying in the gatsby remark configs.

```js
// gatsby-config.js
module.exports = ({
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: require.resolve(`./gatsby-my-remark-plugin.js`),
          }
        ]
      },
    },
  ],
});
```

### For library authors

We can focus on creating the **remark plugin**, then add a **sub-package** just for Gatsby. Create a `gatsby` directory under the root directory with 2 files inside: `package.json` and `index.js`.

```js
// gatsby/package.json
{
  "name": "gatsby-my-remark-plugin",
  "main": "index.js"
}
```

```js
// gatsby/index.js
const toGatsbyRemarkPlugin = require('to-gatsby-remark-plugin');
const myRemarkPlugin = require('..');

module.exports = toGatsbyRemarkPlugin(myRemarkPlugin);
```

Then the users can just reference the **Gatsby remark plugin** via `my-remark-plugin/gatsby`.

```js
// gatsby-config.js
module.exports = ({
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `my-remark-plugin/gatsby`
          }
        ]
      },
    },
  ],
});
```

---
_Source: https://npm.io/package/to-gatsby-remark-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._