marked.js 图片渲染与路径自定义配置教程

本文详细介绍了如何利用 `marked.js` 的自定义渲染器功能，解决其默认不解析 `![[filename.jpg]]` 等非标准图片语法，以及无法直接配置图片 url 前缀的问题。通过重写 `renderer.image` 方法，开发者可以灵活地处理图片路径，实现自定义的图片标签生成逻辑，从而满足特定项目对 markdown 图片渲染的个性化需求。

在处理 Markdown 文件时，marked.js 是一个广受欢迎的库，用于将 Markdown 转换为 HTML。然而，在某些特定场景下，其默认行为可能无法满足所有需求。例如，当遇到 ![[20230613_110437.jpg]] 这种非标准图片语法时，marked.js 默认不会将其解析为 标签，而是直接输出原始文本。此外，如果需要为所有图片 URL 统一添加一个前缀（如 images/），默认配置也无法直接实现。本文将详细阐述如何通过 marked.js 的自定义渲染器（Renderer）功能来解决这些问题。

理解 marked.js 的默认行为与挑战

marked.js 遵循 CommonMark 规范，对于标准 Markdown 图片语法  能够正确解析。但是，对于像 ![[image.jpg]] 这种 Obsidian 或其他特定编辑器中使用的链接语法，marked.js 默认会将其视为普通文本。

此外，即使是标准图片语法，marked.js 也仅仅是按照 src 属性的值直接生成 标签。如果你的图片文件都存放在一个特定的目录下，并且希望在渲染时自动为其 src 属性添加一个路径前缀，例如将 image.jpg 渲染为 ，则需要进行额外的配置。

使用自定义渲染器解决问题

marked.js 提供了一个强大的机制，允许开发者完全控制 Markdown 元素的渲染方式，这就是自定义渲染器。通过创建 marked.Renderer 的实例并重写其对应的方法，我们可以改变特定 Markdown 元素（如图片、链接、标题等）的 HTML 输出。

对于图片渲染，我们需要关注 renderer.image 方法。

1. 创建自定义渲染器实例

首先，你需要引入 marked 库，并创建一个 marked.Renderer 的实例。

const marked = require('marked');
const renderer = new marked.Renderer();

2. 重写 renderer.image 方法

renderer.image 方法接收三个参数：

Ghiblio

专业AI吉卜力风格转换平台，将生活照变身吉卜力风格照

157

查看详情

• href: 图片的源地址（即 Markdown 中括号内的内容）。
• title: 图片的标题（即 Markdown 中双引号内的内容，可选）。
• text: 图片的替代文本（即 Markdown 中方括号内的内容）。

我们需要在这个方法中编写逻辑，来处理 href 并生成我们期望的 标签。

renderer.image = function(href, title, text) {
  // 步骤1: 处理非标准图片语法，例如 [[filename.jpg]]
  // marked.js 会将 ![[20230613_110437.jpg]] 中的 [[20230613_110437.jpg]] 作为 href 传递
  // 我们需要移除 href 两端的 [[ 和 ]]
  let cleanHref = href.replace(/^\[\[|\]\]$/g, '');

  // 步骤2: 为图片 URL 添加前缀
  // 假设所有图片都位于 'images/' 目录下
  const finalSrc = `images/${cleanHref}`;

  // 步骤3: 构建并返回完整的 @@##@@ 标签
  // 注意：如果 title 为空，则不添加 title 属性，以保持 HTML 简洁
  return `@@##@@`;
};

3. 将自定义渲染器应用于 marked.parse

最后一步是将我们创建的自定义渲染器传递给 marked.parse 方法的 options 参数。

// 示例 Markdown 内容
const markdownContent = `
这是一个图片：![[20230613_110437.jpg]]

这是另一个标准图片：![我的猫](cat.png "可爱的猫咪")
`;

// 使用自定义渲染器解析 Markdown
const htmlOutput = marked.parse(markdownContent, { renderer });

console.log(htmlOutput);

完整示例代码

下面是一个完整的 Node.js 示例，演示了如何配置 marked.js 以解析非标准图片语法并添加图片路径前缀：

const marked = require('marked');

// 创建自定义渲染器实例
const renderer = new marked.Renderer();

// 重写 image 方法以自定义图片渲染逻辑
renderer.image = function(href, title, text) {
  // 1. 处理非标准图片语法 (例如：![[filename.jpg]])
  // marked.js 会将 `[[filename.jpg]]` 作为 href 传递给渲染器
  // 我们需要移除 href 两端的 `[[` 和 `]]`
  let cleanHref = href.replace(/^\[\[|\]\]$/g, '');

  // 2. 为图片 URL 添加自定义前缀
  // 假设所有图片都应从 'images/' 目录加载
  const finalSrc = `images/${cleanHref}`;

  // 3. 构建并返回最终的 @@##@@ 标签
  // 如果 title 不存在，则不添加 title 属性
  return `@@##@@`;
};

// 示例 Markdown 内容
const markdown = `
这是一个使用非标准语法的图片：![[20230613_110437.jpg]]

你也可以使用标准Markdown图片语法：![风景图](sunset.jpg "美丽的日落")
`;

// 使用自定义渲染器解析 Markdown 内容
const html = marked.parse(markdown, { renderer });

console.log(html);

运行上述代码，你将得到如下 HTML 输出：

<p>
这是一个使用非标准语法的图片：@@##@@
</p>
<p>
你也可以使用标准Markdown图片语法：@@##@@
</p>

可以看到，无论是 ![[...]] 还是标准  语法，都被成功解析并添加了 images/ 前缀。

注意事项

• 语法兼容性: ![[...]] 是一种非标准 Markdown 语法。此教程提供的解决方案专门针对此类特定需求。对于标准 Markdown 语法，renderer.image 方法同样有效，可以用于统一处理所有图片路径。
• 路径处理灵活性: 示例中使用了简单的字符串拼接来添加 images/ 前缀。在实际应用中，你可以根据需要实现更复杂的路径逻辑，例如：
  • 判断 href 是否为外部 URL（以 http:// 或 https:// 开头），如果是则不添加前缀。
  • 根据不同的 Markdown 文件来源，动态生成不同的图片路径。
  • 使用 path 模块（在 Node.js 环境中）进行更健壮的路径操作。
• 错误处理: 在实际项目中，你可能需要考虑图片文件不存在或路径不正确的情况，并在 renderer.image 方法中添加相应的错误处理或占位符逻辑。
• 性能考量: 对于非常大的 Markdown 文件，自定义渲染器可能会略微增加解析时间，但在大多数情况下，这种性能影响可以忽略不计。

总结

通过 marked.js 的自定义渲染器功能，开发者能够获得极大的灵活性，以满足各种复杂的 Markdown 渲染需求。重写 renderer.image 方法是解决非标准图片语法解析和图片路径统一前缀问题的有效途径。掌握这一技巧，将使你在使用 marked.js 处理 Markdown 内容时更加得心应手。

以上就是marked.js 图片渲染与路径自定义配置教程的详细内容，更多请关注php中文网其它相关文章！