4.0.1 • Published 2 years ago

markdown-it-link-attributes v4.0.1

Weekly downloads
11,741
License
MIT
Repository
github
Last release
2 years ago

markdown-it-link-attributes

Link attributes plugin for markdown-it markdown parser.

Install

node.js, browser:

npm install markdown-it-link-attributes --save
bower 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.

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>

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.

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.

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>

Multiple Configurations

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>

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

webchat-bot-uireact-chat-widget-send-manipulation-fixdocsites@everything-registry/sub-chunk-2132limendo-chat-widgethypermushkoios-chat-widgetnextjs-chat-widgetnadia-chat-widget-reactnervywidgetmy-bot-widgetnext-chat-widgetmengjia-chat-ai-webgpt-vue-componenthabitica-markdownnuxt-jsonnuxt-markdown-module@zalastax/nolb-markdown-i@zync/react-chat-widget@traptitech/traq-markdown-it@zenn-dev/zenn-markdown-html@thaleslabs/react-chat-widgetaigentx-chat-widgetreact-markdown-component-loaderreact-multiple-chat-widget@akrc/vidocsapigene-widgetasif-ui-libreact-chat-voice-widgetreact-chat-web-adaptadoreact-chat-widgetreact-chat-widget-2react-chat-widget-all-dreamreact-chat-widget-customreact-chat-widget-dsreact-chat-widget-for-sevidevreact-chat-widget-framereact-chat-widget-greact-chat-widget-injectablereact-chat-widget-issreact-chat-widget-mreact-chat-widget-micreact-chatvv-widgetreact-chat-widget-onereact-chat-widget-react-18react-chat-widget-testreact-chat-widget-with-audioreact-chat-widget-with-micreact-chat-widget-with-uploadreact-chat-widget_lvreact-chat-jordanreact-chat-theme@8n8/design-system@yugasun/chatbot@bimbeo160/react-chat-widgetscrinity-chat@du201/react-chat-widget@emhamzahazeen/config-vite@enegelai/bot-widget@haugety/react-chat-widget-custom-bundle@inease/slidev-clivite-gardenvue-markdown-guojtorchv-chatunidatalab-chat-widget@kolibrijs/cli@kolibry/clixatkit-chat-widgetwebchat-boto-uizenn-markdown-htmlzenn-markdown-html-customth-react-chat-widget@nerooc/chat-widget@ningensei848/markdown-it-zenn@luisbringitps/react-chat-widget@nhuson/react-chat-widget@factor/api@factor/dep@factor/tools@factor/tools-http@factor/tools-markdown@ecatech/chat-widgetchatkitty-react-widget@dosmond37/react-chat-widgetdbonfs-chat-widgetct43stemuli-chat-windowspignitetest-chat-widgetdocsitedocsite-extscatparty-web-sitesally-website-widget@codementor/ui-kit@bhupesh-sf/react-chat-widget@danestves/markdown@droyer/nuxtcmsso-react-chat-widgetreactive-chat@baleada/prepare
4.0.1

2 years ago

4.0.0

2 years ago

3.0.0

4 years ago

2.1.0

6 years ago

2.0.0

7 years ago

1.0.0

8 years ago