Skip to main content
Home

Built and signed on GitHub Actions

A markdown-it plugin that parses and renders Mastodon-style @mentions

This package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
This package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Bun
This package works with Browsers
JSR Score
100%
Published
9 months ago (0.3.0)

@fedify/markdown-it-mention

JSR npm GitHub Actions

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
Built and signed on
GitHub Actions

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

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

Import symbol

import * as markdown_it_mention from "@fedify/markdown-it-mention";
or

Import directly with a jsr specifier

import * as markdown_it_mention from "jsr:@fedify/markdown-it-mention";

Add Package

pnpm i jsr:@fedify/markdown-it-mention
or (using pnpm 10.8 or older)
pnpm dlx jsr add @fedify/markdown-it-mention

Import symbol

import * as markdown_it_mention from "@fedify/markdown-it-mention";

Add Package

yarn add jsr:@fedify/markdown-it-mention
or (using Yarn 4.8 or older)
yarn dlx jsr add @fedify/markdown-it-mention

Import symbol

import * as markdown_it_mention from "@fedify/markdown-it-mention";

Add Package

vlt install jsr:@fedify/markdown-it-mention

Import symbol

import * as markdown_it_mention from "@fedify/markdown-it-mention";

Add Package

npx jsr add @fedify/markdown-it-mention

Import symbol

import * as markdown_it_mention from "@fedify/markdown-it-mention";

Add Package

bunx jsr add @fedify/markdown-it-mention

Import symbol

import * as markdown_it_mention from "@fedify/markdown-it-mention";