Copy code in jekyll themes

Copy code for jekyll based themes

• Copy code for jekyll based themes
  • Add to your custom scss file
  • Make these changes
    • Add this to your _layouts/post.html or _layouts/default.html
    • Create /assets/js/copy-code.js

Copy code for jekyll based themes #

Add to your custom scss file #

// Copy code css

.copy-code-button {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-column-gap: 4px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
  color: #ffffff;
  background-color: #3f3f3f;
  position: absolute;
  border-radius: .2rem;
  right: 29px;
  margin-top: -45px;

  &::before {
    content: "Copy";
  }

  &::after {
    content: "📋";
    display: block;
  }

  // This class will be toggled via JavaScript
  &.copied {
    &::before {
      content: "Copied!";
    }

    &::after {
      content: "✔️";
    }
  }
}
//END Copy code css

Make these changes #

Add this to your _layouts/post.html or _layouts/default.html #

• <script src="/assets/js/copy-code.js"></script>

Create /assets/js/copy-code.js #

var codeBlocks = document.querySelectorAll('pre.highlight');

codeBlocks.forEach(function (codeBlock) {
  var copyButton = document.createElement('button');
  copyButton.className = 'copy-code-button';
  copyButton.type = 'button';
  copyButton.ariaLabel = 'Copy code to clipboard';

  codeBlock.prepend(copyButton);

  copyButton.addEventListener('click', function () {
    var code = codeBlock.querySelector('code').innerText.trim();
    window.navigator.clipboard.writeText(code);

    copyButton.classList.add('copied');

    setTimeout(function () {
      copyButton.classList.remove('copied');
    }, 4000);
  });
});