@roofox/remark-gatsby-plugins-wrapper

A Remark plugin to add support for (some) gatsby-remark-* plugins.

With @roofox/remark-gatsby-plugins-wrapper you can use some gatsby-remark-* plugins with Remark.

There are just a couple of gatsby-remark-* plugins that works fine with @roofox/remark-gatsby-plugins-wrapper, since most plugins depends explicitly on some gatsby related properties like actions, store, getNodes, schema, etc. this kind of plugins are not supported within this Remark plugin.

Installation

You need to install @roofox/remark-gatsby-plugins-wrapper using NPM or Yarn When using Remark.

npm install -D @roofox/remark-gatsby-plugins-wrapper
yarn add --dev @roofox/remark-gatsby-plugins-wrapper

How to use it

Just add @roofox/remark-gatsby-plugins-wrapper with the use function as any other Remark plugin.

const remarkGatsbyPluginsWrapper = require("@roofox/remark-gatsby-plugins-wrapper");
const processor = remark();

processor.use(remarkGatsbyPluginsWrapper);

Adding gatsby-remark-* plugins

Gatsby's documentation about using plugins is pretty straighforward and @roofox/remark-gatsby-plugins-wrapper use the exact same plugin array format:

remark()
  .use(require('@roofox/remark-gatsby-plugins-wrapper'), {
    plugins: [
      {
        resolve: "gatsby-remark-smartypants",
        options: {
          dashes: "oldschool"
        }
      },
      {
        resolve: "gatsby-remark-prismjs",
        options: {
          showLineNumbers: true,
        },
      },
    ]
  });

Supported gatsby-remark-* plugins

• gatsby-remark-prismjs
• gatsby-remark-smartypants

Example

1. Create an empty project using mkdir my-test && npm init -y.

2. Install the followings dependencies: npm install remark remark-rehype rehype-raw rehype-format rehype-stringify remark-emoji @roofox/remark-gatsby-plugins-wrapper gatsby-remark-smartypants gatsby-remark-prismjs prismjs.

3. Create a test.js file with the following content:

const remark = require("remark");
const remark2rehype = require("remark-rehype");
const raw = require("rehype-raw");
const html2format = require("rehype-format");
const stringify = require("rehype-stringify");
const gatsbyPluginsWrapper = require("@roofox/remark-gatsby-plugins-wrapper");

const processor = remark()
  // A native remark plugin
  .use(require("remark-emoji"))
  // This plugin
  .use(gatsbyPluginsWrapper, {
    // gatsby-remark-* plugins
    plugins: [
      {
        resolve: "gatsby-remark-smartypants",
        options: {
          dashes: "oldschool",
        },
      },
      {
        resolve: "gatsby-remark-prismjs",
        options: {
          showLineNumbers: true,
        },
      },
    ],
  })
  .use(remark2rehype, { allowDangerousHtml: true })
  .use(raw)
  .use(html2format)
  .use(stringify);

const md = `# Title

Lorem ipsum

This is an \`inline code\`.

> "Great quote -- with some style ---"

# :dog: :+1: :-)

\`\`\`javascript
console.log("Hello world");
\`\`\`

**BYE**
`;

processor.process(md, (err, file) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(String(file));
});

4. Run node test.js and you will get the following output:

<h1>Title</h1>
<p>Lorem ipsum</p>
<p>This is an <code class="language-text">inline code</code>.</p>
<blockquote>
  <p>“Great quote – with some style —”</p>
</blockquote>
<h1>🐶 👍 :-)</h1>
<div class="gatsby-highlight" data-language="javascript">
  <pre style="counter-reset: linenumber NaN" class="language-javascript line-numbers"><code class="language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello world"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span></span></pre>
</div>
<p><strong>BYE</strong></p>