Use of rehypePlugins in react-markdown

[PuneetPunamiya]

With the latest release the linkTarget option was removed; and was suggested to use rehype-external-links.

But there's no such example how to use rehypePlugins in the code

For example:

Previous code

<ReactMarkDown
  className="hub-readme"
  transformLinkUri={(uri: string) => transformUri(uri)}
  linkTarget={' '}
  components={{
    code({ inline, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || '');
      return !inline && match ? (
        <SyntaxHighlighter style={dark} language={match[1]} PreTag="div">
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <code className={className} {...props}>
          {children}
        </code>
      );
    }
  }}
>
  {resource.readme}
</ReactMarkDown>

New code with changes

<ReactMarkDown
  className="hub-readme"
  urlTransform={(uri: string) => transformUri(uri)}
  rehypePlugins={[rehypeExternalLinks]}
  components={{
    code({ node, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || '');
      return !node?.properties.inline && match ? (
        <SyntaxHighlighter style={dark} language={match[1]} PreTag="div">
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <code className={className} {...props}>
          {children}
        </code>
      );
    }
  }}
>
  {resource.readme}
</ReactMarkDown>

The goal was to open a link to a new tab

[wooorm]

Is this a question? What is the question? Or is this a tip?

[PuneetPunamiya]

Sorry for the confusion, actually the question was I wanted to know how to use the rehypePlugin instead of linkTarget to open a link in a new tab

[wooorm]

a) you probably shouldn’t, see the readme of rehype-external-links
b) pass options, similar to other plugins, as you can see in the readme rehypePlugins={[somePlugin, [rehypeExternalLinks, options], someOtherPlugin, [somePlugin, moreOptions]]}
c) you want to target _blank so you pass target: '_blank'

[PuneetPunamiya]

a) you probably shouldn’t, see the readme of rehype-external-links

The readme doesn't really give a proper example of using it in jsx

b) pass options, similar to other plugins, as you can see in the readme rehypePlugins={[somePlugin, [rehypeExternalLinks, options], someOtherPlugin, [somePlugin, moreOptions]]}
c) you want to target _blank so you pass target: '_blank'

Yeah I already tried that but it doesn't really work i.e. not able to pass the options correctly, apologies if I'm doing something wrong
rehypePlugins={[rehypeExternalLinks, {target: '_blank'}]}

[wooorm]

a) it explains whether you need it
b) c) if you look at the 2 code examples, you see that the list of plugins is an array, and to pass a plugin with options, you also put it in an array: rehypePlugins={[pluginWithoutOptions, [pluginWithOptions, theOptions], anotherPluginWithoutOptions]}. So: rehypePlugins={[[rehypeExternalLinks, {target: '_blank'}]]}.

[PuneetPunamiya]

Yeah, thanks for the explaination, it worked 👍🏻