Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
markdown-it-link-attributes
Advanced tools
Changelog
4.0.1
Readme
Link attributes plugin for markdown-it markdown parser.
node.js, browser:
npm install markdown-it-link-attributes --save
bower install markdown-it-link-attributes --save
You can pass an object with an attrs property. Each link parsed with this config will have the passed attributes.
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](https://example.com");
result; // <a href="https://example.com" target="_blank" rel="noopener">Example</a>
If the linkify
option is set to true
on markdown-it
, then the attributes will be applied to plain links as well.
var md = require("markdown-it")({
linkify: true,
});
md.use(mila, {
target: "_blank",
rel: "noopener",
});
var html = md.render("foo https://google.com bar");
html; // <p>foo <a href="https://google.com" target="_blank" rel="noopener">https://google.com</a> bar</p>
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.
md.use(mila, {
attrs: {
class: "my-class",
},
});
// or
md.use(mila, {
attrs: {
className: "my-class",
},
});
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.
md.use(mila, {
matcher(href, config) {
return href.startsWith("https:");
},
attrs: {
target: "_blank",
rel: "noopener",
},
});
var matchingResult = md.render("[Matching Example](https://example.com");
var ignoredResult = md.render("[Not Matching Example](http://example.com");
matchingResult; // <a href="https://example.com" target="_blank" rel="noopener">Matching Example</a>
ignoredResult; // <a href="http://example.com">Not Matching Example</a>
Alternatively, you can pass an Array of configurations. The first matcher function to return true will be applied to the link.
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](https://example.com");
var absoluteResult = md.render("[absolute](/some-page");
var blueResult = md.render("[blue](relative/link/with/blue/in/the/name");
externalResult; // <a href="https://example.com" class="external-link">external</a>
absoluteResult; // <a href="/some-page" class="absolute-link">absolute</a>
blueResult; // <a href="relative/link/with/blue/in/the/name" class="link-that-contains-the-word-blue">blue</a>
If multiple matcher functions return true, the first configuration to match will be used.
// 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](https://example.com/blue");
result; // <a href="https://example.com/blue" class="external-link">external</a>
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.
This plugin is tested against the latest version of markdown-it
FAQs
A markdown-it plugin to configure the attributes for links
The npm package markdown-it-link-attributes receives a total of 45,110 weekly downloads. As such, markdown-it-link-attributes popularity was classified as popular.
We found that markdown-it-link-attributes demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.