highlightjs-copy

    1.0.3 • Public • Published

    highlightjs-copy

    Netlify Status

    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>

    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.

    Keywords

    none

    Install

    npm i highlightjs-copy

    DownloadsWeekly Downloads

    375

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    31.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • arronhunt