Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crookedneighbor/markdown-it-link-attributes
https://github.com/crookedneighbor/markdown-it-link-attributes
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/crookedneighbor/markdown-it-link-attributes
- Owner: crookedneighbor
- License: mit
- Created: 2016-08-26T12:29:19.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T16:29:00.000Z (about 1 year ago)
- Last Synced: 2024-12-13T04:22:50.666Z (10 days ago)
- Language: JavaScript
- Size: 402 KB
- Stars: 62
- Watchers: 2
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# markdown-it-link-attributes
> Link attributes plugin for [markdown-it](https://github.com/markdown-it/markdown-it) markdown parser.
## Install
```bash
npm install markdown-it-link-attributes --save
```
## Use
### Basic Configuration
You can pass an object with an attrs property. Each link parsed with this config will have the passed attributes.
```js
const md = require("markdown-it")();
const mila = require("markdown-it-link-attributes");
md.use(mila, {
attrs: {
target: "_blank",
rel: "noopener",
},
});
var result = md.render("[Example](https://example.com");
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
const 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
```
### Applying classes
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",
},
});
```
### Conditionally apply attributes
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",
},
});
const matchingResult = md.render("[Matching Example](https://example.com");
const ignoredResult = md.render("[Not Matching Example](http://example.com");
matchingResult; // Matching Example
ignoredResult; // Not Matching Example
```
### Multiple Configurations
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](https://example.com");
var absoluteResult = md.render("[absolute](/some-page");
var blueResult = md.render("[blue](relative/link/with/blue/in/the/name");
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](https://example.com/blue");
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](https://github.com/markdown-it/markdown-it-footnote/blob/master/LICENSE)