rehype-extended-links

rehype plugin, extends feathers for rehypejs/rehype-external-links.

What is this?

Inherits most of the features from rehypejs/rehype-external-links, extending support for adding <span> to both sides of the <a> label.

Install

npm install rehype-extended-links

yarn add rehype-extended-links

pnpm add rehype-extended-links

Use

import rehypeExtendedLinks from "rehype-extended-links";
import { rehype } from "rehype";
const file = await rehype()
  .use(rehypeExtendedLinks, { rel: ["nofollow"] })
  .use(rehypeStringify)
  .process('<a href="https://example.com">Example</a>');

console.log(String(file));

API

This package exports no identifiers. The default export is rehypeExtendedLinks.

unified().use(rehypeExternalLinks[, options])

Automatically add rel (and target?) to external links.

Parameters

• options (Options, optional) — configuration

Returns

Transform (Transformer).

Notes

You should likely not configure target.

You should at least set rel to ['nofollow']. When using a target, add noopener and noreferrer to avoid exploitation of the window.opener API.

When using a target, you should set content to adhere to accessibility guidelines by giving users advanced warning when opening a new window.

CreateContent

Create a target for the element (TypeScript type).

Parameters

• element (Element) — element to check

Returns

Content to add (Array<Node> or Node, optional).

CreateProperties

Create properties for an element (TypeScript type).

Parameters

• element (Element) — element to check

Returns

Properties to add (Properties, optional).

CreateRel

Create a rel for the element (TypeScript type).

Parameters

• element (Element) — element to check

Returns

rel to use (Array<string>, optional).

CreateTarget

Create a target for the element (TypeScript type).

Parameters

• element (Element) — element to check

Returns

target to use (Target, optional).

Content

Content to add to the link (TypeScript type). A wrapper for Element.

type Content =
  | ElementContent[]
  | CreateContent
  | ElementContent
  | null
  | undefined;

Options

Fields

• content (Array<Node>, CreateContent, or Node, optional) — content to insert at the end of external links; will be inserted in a <span> element; useful for improving accessibility by giving users advanced warning when opening a new window
• preContent The same as content, but it will be inserted at the beginning of the link.
• properties (CreateProperties or Properties, optional) — properties to add to the link itself
• protocols (Array<string>, default: ['http', 'https']) — protocols to see as external, such as mailto or tel
• rel (Array<string>, CreateRel, or string, default: ['nofollow']) — [link types][mdn-rel] to hint about the referenced documents; pass an empty array ([]) to not set rels on links; when using a target, add noopener and noreferrer to avoid exploitation of the window.opener API
• target (CreateTarget or Target, optional) — how to display referenced documents; the default (nothing) is to not set targets on links
• test (Test, optional) — extra test to define which external link elements are modified; any test that can be given to hast-util-is-element is supported

Target

Target (TypeScript type).

Type

type Target = "_blank" | "_parent" | "_self" | "_top";

Note

If content or preContent is set, the <a> label will be wrapped in a span.

Examples

See in test.