arronhunt / highlightjs-copy Goto Github PK
View Code? Open in Web Editor NEWπβοΈ A simple, accessible highlightjs plugin to add a copy button to your code blocks.
Home Page: https://highlightjs-copy.netlify.app
License: The Unlicense
πβοΈ A simple, accessible highlightjs plugin to add a copy button to your code blocks.
Home Page: https://highlightjs-copy.netlify.app
License: The Unlicense
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'
Uncaught TypeError: highlightjs_copy__WEBPACK_IMPORTED_MODULE_3___default(...) is not a function
followed:
import CopyButtonPlugin from "highlightjs-copy";
hljs.addPlugin( new CopyButtonPlugin());
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
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).
Please add TypeScript types!
This seems awesome, but unusable for me without types.
Thanks for writing this!
J
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
When click on icon, nothing has changed. Why? No errors in console
Hi! I'm Chilean and my native language is Spanish. How can I change text "Copied!" to "Copiado!".
Thanks
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.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.