No longer needed?

[karlhorky]

Edit: As @afucher pointed out below, it may still be needed for gatsby-transformer-remark

---

As of @mdx-js/mdx v1.6.1, gatsby-remark-external-links is no longer needed - you can use remark-external-links by itself 🎉

More details here: https://github.com/gatsbyjs/gatsby/issues/22719#issuecomment-624605087

I would recommend removing this from the Gatsby Plugins page and/or mark it as "Deprecated", and point at remark-external-links.

[afucher]

@karlhorky but for gatsby-transformer-remark we still need gatsby-remark-external-links, right?

[karlhorky]

Good question, have you tried it out in an app?

I tried quickly in this CodeSandbox and it appears to be broken:

It looks like gatsby-transformer-remark uses remark-parse internally, which I assume should support standard Remark plugins.

@pieh @wooorm maybe this incompatibility between gatsby-transformer-remark and Remark plugins is worth another PR, this time to gatsby-transformer-remark?

[karlhorky]

Ah it looks like publishing additional "wrapper" npm packages to wrap every remark plugin is the recommended way of doing things 😞 At least in 2018 it was like this.

References:

• @KyleAMathews in https://github.com/gatsbyjs/gatsby/issues/2322#issuecomment-381345998
• @pieh in https://github.com/gatsbyjs/gatsby/issues/9103#issuecomment-429670139
• More background https://github.com/gatsbyjs/gatsby/issues/8009

So @wooorm I guess the process of writing extra wrapper packages you described the downsides about in https://github.com/gatsbyjs/gatsby/issues/22719#issuecomment-622305670 is actually recommended 😞

[afucher]

@karlhorky I'm using, and it works. You can check here

[karlhorky]

@afucher Your link is broken. I guess you mean https://github.com/afucher/afucher.github.io ?

Your code is using gatsby-remark-external-links:

https://github.com/afucher/afucher.github.io/blob/53ac0198fc5a164a69f569a9ce649934d8b5a9ab/gatsby-config.js#L42

My question is whether you have tried it with remark-external-link, which appears to be broken because Gatsby needs these wrapper packages :(

[afucher]

Yes @karlhorky , sry was on my phone, and the link was missing https.

I didn't try to make it works with remark-external-link because the docs (as you mentioned) said that I need the wrapper package.

[bathrobe]

Hi, I was wondering if anyone knew how to add options to remark-external-links when using gatsby-plugin-mdx. I am hoping to add the content: option in the original plugin (to add an "open in new window" icon at the end of each external link), but everywhere i look the remark plugin can only be successfully insert into gatsby-plugin-mdx with require(remark-external-links), which says i can't pass an object.

[karlhorky]

Yeah, this should be documented better - I think this is kind of buried in the documentation somewhere in some Remark package.

The way that has worked for me is to use a 2-element array with the configuration in the second element (gatsby-config.json):

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        remarkPlugins: [
          [require('remark-external-links'), {target: false}],
        ],
      },
    },
  ],
}

[karlhorky]

Opened a PR to add this to the gatsby-plugin-mdx documentation: https://github.com/gatsbyjs/gatsby/pull/27301

[bathrobe]

@karlhorky thank you x100000. was REALLY scratching my head. the Hast dox are defo not quite beginner-friendly. For anyone else searching for new-window icon support, this was my solution! (i'm sure there's a cleaner way than having all this data in gatsby-config but i'm just happy it works)

        remarkPlugins: [
          [
            require("remark-external-links"),
            {
              content: {
                type: "element",
                tagName: "svg",
                properties: {
                  xmlns: "http://www.w3.org/2000/svg",
                  width: "14",
                  height: "14",
                  viewBox: "0 0 24 24",
                  fill: "none",
                  stroke: "currentColor",
                  strokeWidth: "2",
                  strokeLinecap: "round",
                  strokeLinejoin: "round",
                  className: "feather feather-external-link",
                },
                children: [
                  {
                    type: "element",
                    tagName: "path",
                    properties: {
                      d:
                        "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6",
                    },
                  },
                  {
                    type: "element",
                    tagName: "polyline",
                    properties: { points: "15 3 21 3 21 9" },
                  },
                  {
                    type: "element",
                    tagName: "line",
                    properties: {
                      x1: "10",
                      y1: "14",
                      x2: "21",
                      y2: "3",
                    },
                  },
                ],
              },
            },
          ],
        ],

[karlhorky]

One more trick, if you absolutely need a Gatsby remark plugin instead of a normal remark plugin, is to run the normal remark plugin through to-gatsby-remark-plugin (really cool @kevin940726, thanks for this!!)

[wooorm]

That's cool @karlhorky, @kevin940726!