I am facing an issue while trying to integrate a copy to clipboard plugin from prismjs into my next.js app. I have searched for documentation on this but couldn't find any relevant information. Despite going through various websites and implementing the code, the copy-to-clipboard plugin is not functioning as expected.
Below are snippets of the code where I have implemented the plugin:
_app.js :
import '../styles/globals.css'
import "prismjs/themes/prism-twilight.css";
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
</>
)
}
export default MyApp
blogs/[blog].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>
</>
)
UPDATE: Issue resolved successfully!