remarkable-external-link

Remarkable plugin that adds `target` and `rel` attributes on external links. Also, provide ability to insert text/html inside and/or outside a link.

Usage no npm install needed!

<script type="module">
  import remarkableExternalLink from 'https://cdn.skypack.dev/remarkable-external-link';
</script>

README

remarkable-external-link

NPM version Downloads AppVeyor Build Status

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.