使用unified套件转Markdown至HTML时，特定链接格式未被识别求方案

你遇到的这种:a[Anchor Link Text]{href='xxx'}是remark指令（directive）的一种用法，但默认的remark-directive只会解析出指令节点，不会自动转换成HTML链接，需要自己写一个转换插件处理。

步骤1：编写自定义转换插件 #

你需要在unified流程中添加一个自定义的remark插件，把这种指令节点转换成对应的<a>标签。示例代码如下：

import { visit } from 'unist-util-visit';

function remarkAnchorDirective() {
  return (tree) => {
    visit(tree, 'textDirective', (node) => {
      // 匹配`:a[...]{...}`类型的文本指令
      if (node.name === 'a') {
        const href = node.attributes?.href;
        if (href) {
          // 将指令节点替换为标准链接节点
          node.type = 'link';
          node.url = href;
          delete node.name;
          delete node.attributes;
        }
      }
    });
  };
}

步骤2：集成到unified处理流程 #

把这个自定义插件加到你的处理链中，位置放在remark-directive之后：

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkDirective from 'remark-directive';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

const processor = unified()
  .use(remarkParse)
  .use(remarkDirective)
  .use(remarkAnchorDirective) // 插入自定义插件
  .use(remarkRehype)
  .use(rehypeStringify);

// 测试转换效果
const testMarkdown = `:a[Anchor Link Text]{href='https://www.testurl.com/movies/news/the-url-to-test'}`;
processor.process(testMarkdown).then((file) => {
  console.log(String(file));
});

运行后就能将目标格式转换成标准的<a href="xxx">Anchor Link Text</a>。

补充说明 #

如果你的指令还包含其他属性（比如target="_blank"），可以在自定义插件里扩展属性解析逻辑，把这些属性同步到最终的HTML标签上。默认的remark-directive仅负责将特殊语法解析为AST节点，这类特定的锚点指令转换逻辑需要自行实现，目前没有现成的开箱即用插件。

内容的提问来源于stack exchange，提问作者Tami