arronhunt/highlightjs-copy

📋❇️ A simple, accessible highlightjs plugin to add a copy button to your code blocks.

Welcome to my GitHub

I hope you enjoy your stay

✨ My interests

highlightjs-copy's Issues

Nextjs13 - ReferenceError: self is not defined

I'm trying to integrate this into my nextjs13 site in a markdown file that renders blocks of rich text from my headless CMS, i'm using app router. This is probably do to my lack of knowledge with SSR but thought i'd ask here before giving up.

'use client'
import hljs from 'highlight.js';
import CopyButtonPlugin from 'highlightjs-copy';
hljs.addPlugin(new CopyButtonPlugin());

---

[BLOCKS.EMBEDDED_ENTRY]: (node) => {
                const entryId = node.data.target.sys.id;
                const entry = description.links.entries.block.find(e => e.sys.id === entryId);
                if (!entry) return null;
                const highlightedCode = hljs.highlight(entry.code, { language: entry.language }).value;
                return (
                    <div className='syntax-custom overflow-x-auto my-10'>
                        <p className="text-tiny uppercase font-bold mb-1 text-danger">{entry.language}</p>
                        <pre className='text-sm hljs-copy-wrapper'>
                            <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
                        </pre>
                    </div>
                );
            }

---

Error:

ReferenceError: self is not defined
at eval (./lib/markdown.tsx:34:64)
at (ssr)/./lib/markdown.tsx (/folder/.next/server/app/projects/[slug]/page.js:226:1)
at webpack_require (/folder/.next/server/webpack-runtime.js:33:43)
null

License

Really neat plugin - looks like exactly what I'm looking for! But it's unclear right now what types of projects this can be used with.

Could you add a license file to the repo? (If you don't have a preference for license, the Apache 2.0 license or the MIT license are often good choices and Github has a one-click integration for adding popular open source licenses).

how to import highlightjs-copy in js file after npm install

Hi Arron
I installed highlightjs-copy, But I can’t import it after npm install.
Could you pleas help me.
I already instals highlight.js and it works perfectly.

That is for highlight.js:
import hljs from 'highlight.js/lib/core'; import 'highlight.js/styles/base16/railscasts.css'; import javascript from 'highlight.js/lib/languages/javascript'

Support for ReactJS

Change Inner Text "Copied!" when click copy button

Hi! I'm Chilean and my native language is Spanish. How can I change text "Copied!" to "Copiado!".

Thanks

Uncaught ReferenceError when importing in browser environment

Hello @arronhunt,

I've encountered an issue while using the 'highlightjs-copy' library on my non-Node.js website. I'm loading the library as instructed in the README file:

<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>

However, doing so leads to an error in the console:

Uncaught ReferenceError: module is not defined
https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js:1

It seems the library is utilizing the Node.js module.exports syntax, which isn't supported in a browser environment, causing the ReferenceError.

I believe this issue surfaced after the latest 1.0.4 update. Before this update, I didn't encounter such an issue.

Thank you for your time and consideration.

Doesn't work

When click on icon, nothing has changed. Why? No errors in console

Copy icon for lighter themes

Currently this plugin only correctly styles dark-themed code boxes. If I try to use a lighter style, the copy icon does not show up but it still exists in the markup.

The first line is a Redundant Blank line

When click the copy button, I get the content of the code, but, The first line is always a Redundant Blank line
highlightjs: v11.5.1
highlightjs-copy: 1.03

Just copy one line

Is it possible to copy only one line, because there are many times when we only need a line in a large block of code?

This library does not work

Uncaught TypeError: highlightjs_copy__WEBPACK_IMPORTED_MODULE_3___default(...) is not a function
followed:

import CopyButtonPlugin from "highlightjs-copy";
hljs.addPlugin( new CopyButtonPlugin());

TypeScript Support

Please add TypeScript types!

This seems awesome, but unusable for me without types.

Thanks for writing this!

J