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. |