Copy code button

Include in the configuration:

enable_copy_code_button: true

compress_html:
  ignore:
    envs: all

Check that for each of the following code blocks:

  • you always see a copy button at the top right of the block when hovering over the block;

  • selecting an area of the block does not affect the copy button;

  • when the copy button is clickable, the cursor acquires a white-on-green +-sign;

  • clicking the copy button replaces the blank copy button icon by a filled icon with a tick mark, and replaces the clipboard contents by the entire code of the block:

    • including leading and trailing spaces,
    • excluding any line numbers.

Check also including the following configuration:

kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

  1. A single short line:

    Hi!

  2. All these lines with leading, internal, and/or trailing spaces:

     1 leading space
  2 leading spaces and 2 trailing spaces  
3   internal spaces
4 trailing spaces

  3. A single long line:

    Long, single-line code blocks should not wrap. In long lines, the copy button must always be visible in the top right-hand corner and not at the bottom of the scrollbar (its position must not be relative to the end of the text)

  4. A multi-line code block with a single long line:

    Long, multi-line code blocks.
Same as before, in code blocks with short lines and long lines, the copy button must always be visible in the top right-hand corner and not at the bottom of the scrollbar (its position must not be relative to the end of the text)

  5. JS code:

    // Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

  6. Ruby code (line numbers not copied):

1
2
3
4

# Ruby code with syntax highlighting and fixed line numbers using Liquid
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end

Narrow code stays close to the line numbers:

1
2
3

def foo
  puts 'foo'
end