Remarkable plugin that adds `target` and `rel` attributes on external links. Also, provide ability to insert text/html inside and/or outside a link.
npm install remarkable-external-link[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]
[![AppVeyor Build Status][appveyor-image]][appveyor-url]
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.
Via npm
``bash`
npm install remarkable-external-link --save-dev
Via Yarn
`bash`
yarn add remarkable-external-link --dev
`javascript
const { Remarkable } = require('remarkable');
const remarkableExternalLink = require('remarkable-external-link').default;
const md = new Remarkable();
const testString = 'This is an Example link, Google link, Facebook link, Test Example link, Test2 Example link and Relative 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:
`javascript
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:
`javascript
md.use(remarkableExternalLink, {
'beforeLink': '[',
'beforeLinkText': '-=',
'afterLinkText': '=-',
'afterLink': '] (ext)',
});
const testString = 'This is an Example link.';
console.log(md.render(testString));
`
Above code will change the HTML display from
` This is an [-= Example =-] (ext) link.html`
to
` This is an [-= Example =-] (ext) link.html`
| 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. |noopener` | Specifies the relationship between the current document and the linked document. |
| rel | String | No |
| 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. |
[npm-image]: https://img.shields.io/npm/v/remarkable-external-link.svg
[npm-url]: https://www.npmjs.com/package/remarkable-external-link
[downloads-image]: https://img.shields.io/npm/dm/remarkable-external-link.svg
[appveyor-url]: https://ci.appveyor.com/project/samiahmedsiddiqui/remarkable-external-link
[appveyor-image]: https://img.shields.io/appveyor/ci/samiahmedsiddiqui/remarkable-external-link.svg?label=appveyor