Robert Birming

Copy code button

This add-on adds a copy button to your code blocks. Subtle enough to stay out of the way, clear enough to be noticed.. 1 2

Preview

The button appears in the top-right corner of any code block. Here's one to try it on:

console.log("Hello, Bear!");

How to use

  1. Copy the script below and paste it into your Bear footer (Dashboard → Settings → Header and footer directives).
  2. Copy the styles and add them to your theme.

The copy button blends nicely with the rest of your code styling without drawing too much attention.

Script

<script>
/* Copy code blocks | robertbirming.com */
(function () {
  'use strict';

  const ICON_COPY = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="9" height="9" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M3 10V3C3 2.44772 3.44772 2 4 2H10" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>`;
  const ICON_CHECK = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 8L6.5 11.5L13 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.highlight').forEach(function (highlight) {
      if (highlight.querySelector('.copy-code-button')) return;

      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'copy-code-button';
      btn.setAttribute('aria-label', 'Copy code to clipboard');
      btn.innerHTML = ICON_COPY;

      let resetTimer;

      btn.addEventListener('click', function () {
        const code = highlight.querySelector('pre')?.textContent || '';

        navigator.clipboard.writeText(code).then(function () {
          btn.innerHTML = ICON_CHECK;
          btn.setAttribute('aria-label', 'Copied');

          clearTimeout(resetTimer);
          resetTimer = setTimeout(function () {
            btn.innerHTML = ICON_COPY;
            btn.setAttribute('aria-label', 'Copy code to clipboard');
          }, 1000);
        }).catch(function (err) {
          console.error('Failed to copy code:', err);
        });
      });

      highlight.appendChild(btn);
    });
  });
})();
</script>

Styles

/* Copy code button | robertbirming.com */
.highlight {
  position: relative;
}

.copy-code-button {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

@media (hover: hover) {
  .copy-code-button:hover {
    color: var(--text);
    background: var(--border);
  }
}

.copy-code-button:focus-visible {
  color: var(--text);
  background: var(--border);
}

Happy blogging, and happy copying.

Want more? Check out all available Bearming add-ons.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make it work with your setup.↩

  2. Requires JavaScript, available on Bear Blog's premium plan.↩