prism js复制到剪贴板在我的NextJs应用程序中不起作用答案

【问题标题】：prism js copy to clipboard not working in my NextJs appprism js复制到剪贴板在我的NextJs应用程序中不起作用
【发布时间】：2022-08-02 15:58:28
【问题描述】：

我正在尝试将副本从 prismjs 添加到剪贴板插件到我的下一个应用程序。但我没有找到任何关于此的文档。我浏览了许多网站并实现了这段代码。

一切都完成了，但复制到剪贴板插件不起作用。

这是我的代码：

_app.js：

import \'../styles/globals.css\'
import \"prismjs/themes/prism-twilight.css\";

function MyApp({ Component, pageProps }) {
return (
   <>
   <Component {...pageProps} />
   </>
 )

}

export default MyApp

博客/[博客].js：

import Head from \'next/head\'
import { useRouter } from \'next/router\'
import Navbar from \'../components/Navbar\'
import Prism from \'prismjs\'
import \'prismjs/components/prism-java.min\';
import \'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min\'
import { useEffect } from \'react\';

const Blog = () => {
    const router = useRouter()
    const { blog } = router.query

    useEffect(()=>{
        Prism.highlightAll();
    },[])

    return (
        <>
        <div></div>
        { // Other components }

        <pre className=\"copy-to-clipboard\" ><code className=\"language-java\" >

{`public Class Main{
    public static void main(String[]args) {
        System.out.println(\\\"Hello Java..!\\\");
    }
}`}

         </code></pre>
        </>
    )

编辑：固定..！

你怎么修好它的？
>>>import \'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min\' 然后运行 >>> Prism.highlightAll();然后使用这种格式 <pre><code class=\"language-java\"> Public class Name { public static void main() { System.out.println(\"Hello World!\"); } } </code></pre>

标签： javascript next.js prismjs

【解决方案1】：

我们应该从 prism js 的 node_modules 导入插件来执行特定的角色。

在这种情况下，您需要显示复制按钮，因为应该导入以下插件 -除了导入之外，不需要其他代码更改

import Prism from "prismjs";
import "prismjs/plugins/toolbar/prism-toolbar.min.css";
import "prismjs/plugins/toolbar/prism-toolbar.min";
import "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min";

【讨论】：