一个 markdown-it 插件：把 {@username} 渲染成 GitHub 用户链接，并在浏览器里鼠标悬停时显示用户信息卡片。
pnpm add markdown-it-github-mention-cardimport MarkdownIt from 'markdown-it'
import MarkdownItGitHubMentionCard, { initHoverCard } from 'markdown-it-github-mention-card'
const md = new MarkdownIt()
md.use(MarkdownItGitHubMentionCard, {
// 可选：用于提高 GitHub API 速率限制（注意：在浏览器端暴露 Token 有风险）
githubToken: 'YOUR_GITHUB_TOKEN',
})
const html = md.render('{@antfu}\n{@antfu|Anthony Fu}')
document.querySelector('#app')!.innerHTML = html
// 在浏览器端调用，使用插件初始化时设置的 token
initHoverCard()在服务端渲染（SSR）或静态站点生成（SSG）场景下，由于构建时和浏览器端环境分离，建议在浏览器端调用 initHoverCard() 时传递 token：
// 服务端/构建时
import MarkdownIt from 'markdown-it'
import MarkdownItGitHubMentionCard from 'markdown-it-github-mention-card'
const md = new MarkdownIt()
md.use(MarkdownItGitHubMentionCard)
// 注意：SSR/SSG 场景下，不要在服务端传递 token（避免暴露）
const html = md.render('{@antfu}\n{@antfu|Anthony Fu}')// 浏览器端（客户端）
import { initHoverCard } from 'markdown-it-github-mention-card'
// 在客户端调用时传递 token（从环境变量或配置中获取）
initHoverCard(process.env.NEXT_PUBLIC_GITHUB_TOKEN) // Next.js 示例
// 或
initHoverCard(import.meta.env.VITE_GITHUB_TOKEN) // Vite 示例initHoverCard(token?) 支持可选的 token 参数，优先级如下：
- 传入的 token（
initHoverCard(token)中的参数）- 最高优先级 - 插件初始化时的 token（
md.use(plugin, { githubToken })中设置的）
这种设计允许你在不同场景下灵活使用：
- 纯客户端场景：在插件初始化时设置 token，调用
initHoverCard()即可 - SSR/SSG 场景：不在服务端暴露 token，在客户端调用时传递 token
构建产物同时包含 default 与具名导出，因此在 CommonJS 中需要通过 .default 取到默认导出：
const MarkdownIt = require('markdown-it')
const plugin = require('markdown-it-github-mention-card').default
const { initHoverCard } = require('markdown-it-github-mention-card')
const md = new MarkdownIt()
md.use(plugin, { githubToken: process.env.GITHUB_TOKEN })
// 渲染并插入 DOM 后，再调用 initHoverCard(){@username}：渲染为https://github.com/username链接，并标记为可悬停卡片{@username|显示文本}：自定义链接文本{@username|显示文本|链接}：自定义链接地址（仍会在符合 GitHub 用户链接时展示卡片）
githubToken?: string：GitHub Personal Access Token，用于请求https://api.github.com/users/:username，可降低未登录请求的限流概率。
function initHoverCard(token?: string): voidtoken?: string：可选的 GitHub Personal Access Token。如果提供，将优先使用此 token；否则使用插件初始化时设置的 token。
插件内置了暗色模式支持。当页面或父元素包含 .dark 类时，悬停卡片会自动切换到暗色主题：
<html class="dark">
<!-- 或 -->
<body class="dark">
<!-- 内容 -->
</body>
</html>pnpm install
pnpm dev:server启动后打开 http://localhost:3000/dev.html，输入 token（可选），渲染后把鼠标移到 GitHub 用户链接上即可看到信息卡片。
开发页面功能：
- ✅ 测试 token 在插件初始化时传入
- ✅ 测试 token 在
initHoverCard(token)时传入 - ✅ 测试暗色模式切换
- ✅ 实时预览渲染结果