remark-gfm 脚注被忽略答案

【问题标题】：remark-gfm footnotes are ignoredremark-gfm 脚注被忽略
【发布时间】：2021-12-22 14:19:03
【问题描述】：

从最新的 remark-gfm 文档中，我可以看到它应该支持脚注。但是，当我输入如下内容时：

Text here. [^1]

Text here. [^2]

[^1]: note 1

[^2]: note 2

这显示为文本，而不是转换为 HTML 标记。

我的代码是：

...
import ReactMarkdown from "react-markdown";                                      
import remarkGfm from "remark-gfm";
...

<ReactMarkdown children={markdown_content_here} remarkPlugins={[remarkGfm]} />
...

【问题讨论】：

显然需要配置remark-rehype。我现在也遇到了同样的问题，等我解决了再回复。
我看到了这个，但我看到了不同的反馈。 remark-rehype 和 remark-footnotes 不是遗留的并包含在 remark-gfm 中吗？在这里找到这个：github.com/remarkjs/remark-footnotes
是的，remark-footnotes 是遗留问题，但如果您不在乎，您也可以使用make it works。刚看了react-remark的源码，发现already usesremark-rehype...
我的第一条评论是错误的。我在remark-gfm 的文档中指的是This plugin does not handle how markdown is turned to HTML. That’s done by remark-rehype. If your content is not in English and uses footnotes, you should configure that plugin。顺便说一句，react-remark 不允许我们配置remark-rehype...我原以为remark-gfm 可以开箱即用。也许我会弄清楚只使用unified。
嗯，remark-gfm 完成了宣传的工作：请参阅this sandbox（检查控制台）。但是当我在this line 之后console.log 时，它表明脚注在<p> 标记中。

标签： markdown react-markdown

【解决方案1】：

我让它在 this codesandbox 中工作。

example.md

Text here. [^1]

Text here. [^2]

[^1]: note 1
[^2]: note 2

import "./styles.css";
import markdown from "./example.md";
import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

export default function App() {
  const [text, setText] = useState(null);

  useEffect(() => {
    (async () => {
      const response = await fetch(markdown);
      const content = await response.text();
      setText(content);
    })();
  }, []);
  return <ReactMarkdown remarkPlugins={[remarkGfm]} children={text} />;
}

（另见this codesandbox 与纯unified + remark-gfm）。

猜想：为什么它不起作用

有了可重现的working example，现在可以很容易地观察到与我的真实代码的区别：出于某种原因，我安装了remark-gfm v2。您应该升级到 v3 以确保脚注有效。

【讨论】：

啊，这是一个好点。我认为对我来说它不起作用，因为要将 remark-gfm 升级到 v3，我需要将 react-markdown 升级到 v7。然后导致我出现一个仅限 ESM 的错误，由于其他依赖项，我无法在现场真正修复（建议的解决方案似乎是在 package.json 中添加“type”：“module”