remarkable-external-link

Remarkable plugin that adds target and rel attributes on external links. It also provides ability to insert Text/HTML inside and/or outside a link for external links or for all the links (including external) depending on your configuration.

Install

Via npm

npm install remarkable-external-link --save-dev

Via Yarn

yarn add remarkable-external-link --dev

Usage

const { Remarkable } = require('remarkable');
const remarkableExternalLink = require('remarkable-external-link').default;
const md = new Remarkable();

const testString = 'This is an [Example](http://example.com) link, [Google](https://google.com) link, [Facebook](https://facebook.com) link, [Test Example](http://test.example.com/) link, [Test2 Example](http://test2.example.com/) link and [Relative](/docs/concept/) link.';

// Mark http://example.com and http://test.example.com as internal domain.
md.use(remarkableExternalLink, {
  'hosts': [
    'http://example.com',
    'http://test.example.com'
  ]
});

const output = console.log(md.render(testString));

Or With Docusaurus:

const remarkableExternalLink = require('remarkable-external-link').default;
const siteConfig = {
  ...

  markdownPlugins: [
    function (md) {
      remarkableExternalLink(md, {
        'hosts': [
          'http://example.com',
          'http://test.example.com'
        ]
      });
    }
  ]

  ...
}

Or with text insertion:

md.use(remarkableExternalLink, {
  'beforeLink': '[',
  'beforeLinkText': '-=',
  'afterLinkText': '=-',
  'afterLink': '] (ext)',
});


const testString = 'This is an [Example](http://example.com) link.';
console.log(md.render(testString));

Above code will change the HTML display from

<p>This is an [<a href="http://example.com">-= Example =-</a>] (ext) link.</p>

to

<p>This is an [<a href="http://example.com">-= Example =-</a>] (ext) link.</p>

Parameters

Attributes	Type	Required	Default	Description
hosts	Array	Yes	[]	Site hostname(s) to detect external links.
target	String	No	_blank	Specifies where to open the linked document.
rel	String	No	noopener	Specifies the relationship between the current document and the linked document.
externalOnly	String	No	true	Prepend / append text only to external links.
beforeLink	String	No	null	Specifies Text / HTML to be inserted before a link.
beforeLinkText	String	No	null	Specifies Text / HTML to be inserted at the start of the text within a link.
afterLinkText	String	No	null	Specifies Text / HTML to be inserted at the end of the text within a link.
afterLink	String	No	null	Specifies Text / HTML to be inserted after a link.