3

通过执行以下操作，我拥有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/_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>
}

一切正常，源代码被正确突出显示 - 当我尝试使用Prism的line-highlight插件时，问题就出现了。

当我将data-line属性添加到 HTML 时，如下所示。

pages/blog-article.tsx 
...
    <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 插件似乎也可以工作；我试用了line-numbers插件，并没有导致这个问题。

这是插件的错误Prism.js还是line-highlight我做错了什么？

有什么解决方法可以让它继续运行吗？

4

0 回答 0