在Next.js应用程序中使用Prism.js line highlight插件会导致；文本内容不匹配"；错误

通过执行以下操作，我有了基本的

Prism.js

功能，可以使用我的

Next.js

站点：

package.json

  "dependencies": {
   ...
    "next": "9.5.3",
    "react": "16.13.1",
    "typescript": "3.9.4",
    "prismjs": "1.22.0"
  },
  "devDependencies": {
    ...
    "@types/prismjs": "1.16.2"
  }

pages/\u app.tsx

...
import "prismjs/themes/prism-tomorrow.css";
...

pages/blog article.tsx

...
import Prism from "prismjs";
import "prismjs/components/prism-hcl";
import "prismjs/plugins/line-highlight/prism-line-highlight";
...

export default function BlogArticle(){
  useEffect(() => {
    if (typeof window !== 'undefined') {
      Prism.highlightAll();
    }
  }, []);

  return <div>
    <pre className="language-hcl" style={{marginTop: "1em"}}>
      <code>{`xxx`}</code>
   </pre>
 </div>
}

...
    <pre className="language-hcl" style={{marginTop: "1em"}} data-line={1}>
      <code>{`xxx`}</code>
   </pre>
...

} 所有的工作都很好，并且源代码被正确地高亮显示——当我尝试使用Prism的插件时，问题就来了

当我向HTML添加

数据行

属性时，如下所示

pages/blog article.tsx

...
import Prism from "prismjs";
import "prismjs/components/prism-hcl";
import "prismjs/plugins/line-highlight/prism-line-highlight";
...

export default function BlogArticle(){
  useEffect(() => {
    if (typeof window !== 'undefined') {
      Prism.highlightAll();
    }
  }, []);

  return <div>
    <pre className="language-hcl" style={{marginTop: "1em"}}>
      <code>{`xxx`}</code>
   </pre>
 </div>
}

...
    <pre className="language-hcl" style={{marginTop: "1em"}} data-line={1}>
      <code>{`xxx`}</code>
   </pre>
...

... 我得到以下错误：

Warning: Text content did not match. Server: "xxx 
" Client: "xxx"

所以，如果我理解正确：这是来自

Next.js

的一个错误，告诉我服务器呈现的内容和客户端呈现的内容不同

查看错误消息，插件似乎在内容末尾添加换行符，但仅在服务器渲染期间添加，而不是在客户端渲染期间添加

请注意，其他Prism插件似乎可以工作；我尝试了

行号

插件，但没有引起这个问题

这是

Prism.js

插件的一个bug，还是我做错了什么

我能做些什么来让它运转起来吗