Marked.js 中处理相对路径的注意事项

在基于Marked.js构建Markdown阅读器时，开发者经常会遇到处理相对路径的问题。本文将通过一个典型场景，分析如何正确使用walkTokens函数来处理Markdown文档中的相对路径转换。

问题背景

当开发Electron应用中的Markdown阅读器时，文档中的图片或链接常使用相对路径表示（如./d.png）。由于Electron基于Node.js运行环境，这些相对路径需要转换为绝对路径才能正确解析。

常见错误模式

许多开发者会尝试在每次打开文件时都调用marked.use()来注册walkTokens函数，这会导致路径被重复处理。例如：

1. 第一次打开./d.efg → 正确转换为C:/abc/d.efg
2. 第二次打开 → 错误转换为C:/abc/C:/abc/d.efg

这种错误源于对Marked.js扩展机制的理解不足。marked.use()实际上是全局性的配置，多次调用会导致处理逻辑叠加。

正确解决方案

方案一：单次注册

最直接的方式是在应用初始化时一次性注册walkTokens函数：

import { marked } from "marked";

function walkTokens(token) {
    if (token.type === 'image' || token.type === 'link') {
        token.href = markdownDir + ("/" + token.href)
            .replace("//", "/")
            .replace("\\", "/")
            .replace("%5C", "/")
            .replace("./", "/");
    }
}

marked.use({ walkTokens });

方案二：使用Marked实例

更推荐的方式是创建Marked实例，避免影响全局配置：

import { Marked } from "marked";

// 在每次渲染时
const marked = new Marked();
marked.use({ 
    walkTokens(token) {
        // 路径处理逻辑
    }
});
const htmlContent = marked.parse(markdownContent);

重要注意事项

1. 始终使用marked.parse()而非直接调用marked()，前者是官方推荐的标准用法
2. 路径处理时要考虑多种分隔符情况（/、\、%5C等）
3. 在Electron环境中，确保正确处理文件协议（file://）

最佳实践建议

1. 路径处理逻辑应该放在专门的工具函数中
2. 考虑使用Node.js的path模块来处理路径规范化
3. 对于生产环境应用，建议添加路径安全性检查
4. 可以扩展支持更多协议（如http/https）的URL处理

通过正确理解和使用Marked.js的扩展机制，开发者可以构建出稳定可靠的Markdown处理流程，完美解决相对路径转换问题。