Add code copy buttons using 'markdown-it-copy' plugin

[Tweekism]

Issue #202

Hi all,

I'm working on adding "copy code" buttons like seen on GitHub, Microsoft docs, stack overflow etc.

Feedback so far:-

• Have the button be invisible until the <pre> block is hovered over
• Have the default visibility be configurable

Default visibility can be toggled back on in custom css.

One thing I'm still struggling with is the alignment issue. @jannis-baum I tryed your suggestion, but turns out I had already set the <pre> element with the scroll overflow to relative and then set the button to absolute with a top, right offset. However, while that sets the starting position correctly, it then scrolls along with the overflow box (see blow for example).

If I wrap the <pre> in a containing <div> and set the the button relative to the <div> then it works as expected, but the <pre> blocks are created by the markdown plugin and I don't know how or if that is the right approach.

A comparison of the change

So looking for feedback / ideas on that.

I've pushed the PR branch here in-case anyone wanted to try it out.

[Tweekism]

As a side note...

The plugin has a "success" popout thing after you click the button. Out-of-the-box it shows up for 2 seconds then disappears. The javascript for that is contained in the plugin but with some css you can set it to fade out when you leave the button.

At first I thought option 1, where it lingered around, looked kinda weird, but after using it for a few days i noticed your eyes tend to move off to where you are pasting to really see it. In any case, I also tryed option 2 and at first I liked it but in fact having it fade away instantly if you are moving fast might be weirder.

But I don't know, let me know what you think is a more sane default. Option 1 is simpler. Option 2 is a couple extra lines of css (lines 224-226 added in markdown.css). Option 2 is currently set but you can set opacity on line 204 back to 1 to turn off the effect.

Of course either could be achieved in custom css.

[jannis-baum]

Hello! How is it going on this? When testing with yarn dev this looks great to me but when I try to install it and run the binary I get a weird error that I don't understand:

node:fs:563
  return binding.open(
                 ^

Error: ENOENT: no such file or directory, open '/Users/jannisbaum/.bin/lib/code.js'
    at Object.openSync (node:fs:563:18)
    at Object.readFileSync (node:fs:447:35)
    at 3928 (build/bundle.js:2:448835)
    at __webpack_require__ (build/bundle.js:2:4588852)
    at 3226 (build/bundle.js:2:3374025)
    at __webpack_require__ (build/bundle.js:2:4588852)
    at 6421 (build/bundle.js:2:3402535)
    at __webpack_require__ (build/bundle.js:2:4588852)
    at 2466 (build/bundle.js:2:1517545)
    at __webpack_require__ (build/bundle.js:2:4588852) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/jannisbaum/.bin/lib/code.js'
}

Node.js v23.7.0

Do you know what that code.js file is supposed to be and do you also get this error?

[Tweekism]

Yeah I discovered this the day after posting, happens to me too. I don't know why it is looking for code.js, must be the npm markdown-it-copy package. I'll look into it.