New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

highlightjs-copy

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

highlightjs-copy

A simple, accessible highlightjs plugin to add a copy button to your codeblocks.

1.0.5
npm

Version published: last year

Weekly downloads: 525; decreased by-85.08%

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

highlightjs-copy

A simple, accessible highlightjs plugin to add a copy button to your codeblocks.

Preview

Demo

Check out the demo

Install

Using a CDN

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

<link
  rel="stylesheet"
  href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
/>

NPM

npm install highlightjs-copy

Usage

Basic usage

hljs.addPlugin(new CopyButtonPlugin());

With a callback

hljs.addPlugin(
  new CopyButtonPlugin({
    callback: (text, el) => console.log("Copied to clipboard", text),
  })
);

Modify copied text with hooks

hljs.addPlugin(
  new CopyButtonPlugin({
    hook: (text, el) => text + "\nCopied from my cool website.",
  })
);

Advanced hook example

<!-- Code block example -->
<pre>
  <code class="language-bash" data-replace="{{YOUR_API_KEY}}" data-replaceWith="grtf32a35bbc...">
    gretel configure --key {{YOUR_API_KEY}}
  </code>
</pre>

<script>
  hljs.addPlugin(
    new CopyButtonPlugin({
      hook: (text, el) => {
        let { replace, replacewith } = el.dataset;
        if (replace && replacewith) {
          return text.replace(replace, replacewith);
        }
        return text;
      },
      callback: (text, el) => {
        /* logs `gretel configure --key grtf32a35bbc...` */
        console.log(text);
      },
    })
  );
  hljs.highlightAll();
</script>

Localization

highlightjs-copy supports multiple locales by providing the correct language for accessibility.

hljs.addPlugin(
  new CopyButtonPlugin({
    lang: "es", // The copy button now says "Copiado!" when selected.
  })
);

This option is unnecessary if you correctly add the lang attribute to your document. You can override this behavior by providing the lang option as described above.

<html lang="es">
  <body>
    <!-- The plugin language defaults to `es` to match the document, so manually setting it is unnecessary. -->
    <script>
      hljs.addPlugin(new CopyButtonPlugin());
    </script>
  </body>
</html>

If the document has no lang set and the lang option is not provided, it will default to en.

Customization

CSS selector	Details
`.hljs-copy-wrapper`	Applied to the parent `<pre>` element that wraps the .hljs code.
`.hljs-copy-button`	The copy button itself. The variable `--hljs-theme-background` is automatically applied to the parent element. This allows the button to inherit the code block's background color.
`[data-copied='true']`	This data attribute is applied to the copy button and is set to `true` for two seconds when the copy action is performed.
`.hljs-copy-alert`	A visually hidden status element that announces the copy confirmation to screen readers.

FAQs

What is highlightjs-copy?

Is highlightjs-copy popular?

Is highlightjs-copy well maintained?

Package last updated on 18 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install