@fedify/markdown-it-mention

This is a markdown-it plugin that parses and renders Mastodon-style @mentions, e.g., @username@domain.com. It converts them to a link, e.g.:

<a href="acct:@username@domain.com"><span class="at">@</span><span
  class="user">username</span></a>

The value of href attributes, other attributes (if any), and the content of the link can be customized by passing options to the plugin:

import MarkdownIt from "markdown-it";
import { mention, toFullHandle } from "@fedify/markdown-it-mention";

const md = new MarkdownIt();
md.use(mention, {
  link: (handle: string, env: any) => `https://example.com/${handle}`,
  linkAttributes: (handle: string, env: any) => ({ class: "mention" }),
  label: toFullHandle,
});

Tip

The link callback can return null to disable the link.

If you want to collect all the handles mentioned in the document, you can pass the environment object to the render() method:

const env = {};
md.render(
  "# Hello, @foo@bar.com\n\n> @baz@qux.com",
  env,
);
console.log(env.mentions);  // ["@foo@bar.com", "@baz@qux.com"]

Installation

Deno

deno add jsr:@fedify/markdown-it-mention

Node.js

npm add @fedify/markdown-it-mention

Bun

bun add @fedify/markdown-it-mention