Add copy button to your code blocks

to run in your site's root directory

View template source
create_file "app/processors/copyable_code_processor.rb", <<~RUBY
class CopyableCodeProcessor < Perron::HtmlProcessor::Base
  def process
    @html.css("pre").each do |pre|
      next if skippable? pre

      id = "pre_#{Random.hex(4)}"

      button = Nokogiri::XML::Node.new("button", @html)
      button["type"] = "button"
      button["data-action"] = "copy"
      button["data-target"] = "##{id}"
      button.content = "Copy"

      pre["id"] = id
      pre.add_previous_sibling(button)
    end
  end

  private

  def skippable?(pre)
    # add when the processor should skip this pre-element, e.g.
    # `pre["lang"] == "console"`
  end
end
RUBY

This snippet adds a processor to add a copy-button to your code blocks (pre-tags).

As this processor is powered by Attractive.js, make sure to follow its installation instructions.

It is unstyled so you need to bring your own CSS. For an example of one using Tailwind CSS, refer to the processor used on this site.