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.6
latest
npm

Version published: 3 months ago

Weekly downloads: 3.4K; decreased by-27.11%

Maintainers: 0

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());

Autohide

By default, the copy button is hidden until a user hovers the code block. Set this to false to have the copy button always visible.

hljs.addPlugin(
  new CopyButtonPlugin({
    autohide: false, // Always show the copy button
  })
);

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-container`	A parent element to the button, in charge of absolute positioning and animating the button when hovering.
`.hljs-copy-button`	The copy button itself. The variables `--hljs-theme-background` and `--hljs-theme-color` are automatically applied to the parent element. This allows the button to inherit the code block's text and background colors.
`[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 16 Oct 2024

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