Enable Copy‐to‐Clipboard for Code Samples - slatedocs/slate GitHub Wiki

Slate offers a copy-to-clipboard button so users can easily copy the contents of a code sample to their clipboard. The location of the button is the upper right corner of code samples by default.

If you have an older version of Slate from before June 2020, you may have missed this feature and need to add it manually.

To enable a copy-to-clipboard button for code samples, follow these steps:

  1. In source/javascripts/all_nosearch.js, add //= require ./app/_copy as codeline 2.
  2. Add the JS file source/javascripts/app/_copy.js to your app folder.
  3. In source/layouts/layout.erb, add the following at the bottom of the <head> tag:
<script>
  $(function() { setupCodeCopy(); });
</script>
  1. In source/stylesheets/screen.css.scss, add the following at the end of the file:
.copy-clipboard {
  float: right;
  fill: #9DAAB6;
  cursor: pointer;
  opacity: 0.4;
  height: 18px;
  width: 18px;
}

.copy-clipboard:hover {
  opacity: 0.8;
}

To see how the Slate team implemented the copy-to-clipboard button, you can look at this commit.

Note: In the commit, the bool in source/index.html.md and in source/layouts/layout.erb and the changes in source/stylesheets/print.css.scss may not be necessary for your implementation

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️