markdown-it-link-attributes

> Link attributes plugin for markdown-it markdown parser.

Install

node.js, browser:

``bash
npm install markdown-it-link-attributes --save
bower install markdown-it-link-attributes --save
`

Use

$3

You can pass an object with an attrs property. Each link parsed with this config will have the passed attributes.

`js
var md = require("markdown-it")();
var mila = require("markdown-it-link-attributes");

md.use(mila, {
attrs: {
target: "_blank",
rel: "noopener",
},
});

var result = md.render("Example;

result; // Example
`

If the linkify option is set to true on markdown-it, then the attributes will be applied to plain links as well.

`js
var md = require("markdown-it")({
linkify: true,
});

md.use(mila, {
target: "_blank",
rel: "noopener",
});

var html = md.render("foo https://google.com bar");
html; //

foo https://google.com bar


`

$3

You can apply a class to a link by using a class or a className property. Either one will work, but use only one, not both.

`js
md.use(mila, {
attrs: {
class: "my-class",
},
});

// or
md.use(mila, {
attrs: {
className: "my-class",
},
});
`

$3

You can choose to test a link's href against a matcher function. The attributes will be applied only if the matcher function returns true.

`js
md.use(mila, {
matcher(href, config) {
return href.startsWith("https:");
},
attrs: {
target: "_blank",
rel: "noopener",
},
});

var matchingResult = md.render("Matching Example;
var ignoredResult = md.render("Not Matching Example;

matchingResult; // Matching Example
ignoredResult; // Not Matching Example
`

$3

Alternatively, you can pass an Array of configurations. The first matcher function to return true will be applied to the link.

`js
md.use(mila, [
{
matcher(href) {
return href.match(/^https?:\/\//);
},
attrs: {
class: "external-link",
},
},
{
matcher(href) {
return href.startsWith("/");
},
attrs: {
class: "absolute-link",
},
},
{
matcher(href) {
return href.startsWith("/blue/");
},
attrs: {
class: "link-that-contains-the-word-blue",
},
},
]);

var externalResult = md.render("external;
var absoluteResult = md.render("absolute;
var blueResult = md.render("blue;

externalResult; // external
absoluteResult; // absolute
blueResult; // blue
`

If multiple matcher functions return true, the first configuration to match will be used.

`js
// This matches both the "starts with http or https" rule and the "contains the word blue" rule.
// Since the http/https rule was defined first, that is the configuration that is used.
var result = md.render("external;

result; // external
`

Usage in the browser

_Differences in browser._ If you load script directly into the page, without a package system, the module will add itself globally as window.markdownitLinkAttributes.
You need to load dist/markdown-it-link-attributes.min.js`, if you don't use a build system.

Testing

This plugin is tested against the latest version of markdown-it

License

MIT