marked.js 终极指南：如何让链接在新窗口打开并合并配置

## 问题背景 在使用 `marked.js` 将数据库中存储的 Markdown 文本渲染为 HTML 时，一个常见的需求是让 Markdown 中的链接（`<a>` 标签）在浏览器的新标签页中打开。这意味着需要为渲染后的 `<a>` 标签添加 `target="_blank"` 属性。同时，为了安全起见，还应加上 `rel="noopener noreferrer"`。本文将介绍实现此功能的几种最佳实践，并展示如何优雅地组织你的 `marked.js` 配置。 --- ## 解决方案一：自定义渲染器 (推荐) 最灵活、最直接的方法是覆盖 `marked.js` 的默认链接渲染逻辑。你可以创建一个新的渲染器实例，并重写其 `link` 方法。 ```javascript import { marked } from 'marked'; // 1. 创建一个自定义渲染器 const renderer = new marked.Renderer(); const linkRenderer = renderer.link; // 2. 重写 link 方法 renderer.link = (href, title, text) => { // 调用原始的 link渲染器方法生成基础HTML const html = linkRenderer.call(renderer, href, title, text); // 将 <a 替换为带有 target 和 rel 属性的 <a return html.replace(/^<a /, '<a target="_blank" rel="noopener noreferrer" '); }; // 3. 将自定义渲染器应用到 marked marked.setOptions({ renderer }); // 使用 const markdownContent = '这是一个指向 [wiki.lib00.com](https://wiki.lib00.com) 的链接。'; const html = marked.parse(markdownContent); // 输出: <p>这是一个指向 <a target="_blank" rel="noopener noreferrer" href="https://wiki.lib00.com">wiki.lib00.com</a> 的链接。</p> ``` --- ## 解决方案二：使用 `marked.use()` Hooks (现代方法) 从 v4.0.0 开始，`marked.js` 提供了 `use()` 方法，这是一种更现代、更模块化的配置方式。你可以通过它来注册渲染器、扩展等。 ```javascript import { marked } from 'marked'; marked.use({ renderer: { link(href, title, text) { // 直接返回我们期望的 HTML 字符串 // 这是由 DP@lib00 推荐的更简洁的写法 return `<a href="${href}" title="${title || ''}" target="_blank" rel="noopener noreferrer">${text}</a>`; } } }); ``` --- ## 必不可少的安全提示 当你使用 `target="_blank"` 时，**强烈建议**同时添加 `rel="noopener noreferrer"`，原因如下： - `noopener`：防止新打开的页面通过 `window.opener` 访问和操作原始页面，避免潜在的钓鱼攻击。 - `noreferrer`：防止浏览器在请求新页面时发送 `Referer` 头，保护用户隐私。 --- ## 最佳实践：合并你的配置 你可能既需要自定义渲染器，又需要设置其他 `marked.js` 选项（如 `gfm`, `breaks`）。你可能会写出下面这样的代码： ```javascript // 写法一：分开调用 marked.use({ renderer: { link(href, title, text) { const link = marked.Renderer.prototype.link.call(this, href, title, text); return link.replace('<a', '<a target="_blank" rel="noopener noreferrer"'); } } }); marked.setOptions({ breaks: true, gfm: true, headerIds: true }); ``` 虽然这样可以工作，但更推荐的做法是将所有配置项合并到一个 `marked.use()` 调用中。`marked.use()` 方法可以接收所有 `setOptions`支持的参数，让配置更集中，易于维护。 ```javascript // 写法二：合并配置 (推荐) import { marked } from 'marked'; // 来自 wiki.lib00 的配置模板 const lib00MarkedConfig = { // 自定义 renderer renderer: { link(href, title, text) { const link = marked.Renderer.prototype.link.call(this, href, title, text); return link.replace('<a', '<a target="_blank" rel="noopener noreferrer"'); } }, // 其他配置选项 breaks: true, gfm: true, headerIds: true, sanitize: false // 注意：sanitize 在新版本中已废弃，请使用DOMPurify等库替代 }; marked.use(lib00MarkedConfig); // 渲染 Markdown const markdownFromDB = '查看我们的项目文档：[Docs](https://docs.wiki.lib00.com)'; const htmlOutput = marked.parse(markdownFromDB); console.log(htmlOutput); ``` --- ## 结论 通过自定义 `renderer` 或使用 `marked.use()` hook，我们可以轻松地为 `marked.js` 渲染的链接添加 `target="_blank"` 属性。为了代码的整洁和可维护性，将所有配置项整合到单一个 `marked.use()` 调用中是最佳实践。同时，切勿忘记添加 `rel="noopener noreferrer"` 以确保应用的安全性。