Add copy buttons to code blocks

[amad-person]

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [X] Enhancement to an existing feature

Fixes#562.

What is the rationale for this request?

Adding copy buttons to code blocks will allow users to copy code snippets with a single click.

What changes did you make? (Give an overview)

1. Added copy buttons to all code blocks (Page.js, markbind.css).
2. Handled copy to clipboard on click (setup.js) using the minified version of clipboard.js as an imported asset.

Testing instructions:

Build the docs website and check the copy buttons for code blocks are working correctly.

[amad-person]

Some questions:

1. Right now copy buttons are added to all code blocks. Not sure if we need to give users an option to opt out of this?
2. I added clipboard.min.js as an asset to handle the copy to clipboard logic, is there a better way to do this?

[Chng-Zhi-Xuan]

Right now copy buttons are added to all code blocks. Not sure if we need to give users an option to opt out of this?

It won't be easy to implement a way for users to select whether they want a copy button or not. Since it is using Markdown syntax to specify the code block.

A more thorough implementation would require you to implement a code block component in vue, which can greatly extend customisation easily via props (E.G <codeblock no-copy>).

For now, I think this implementation is ok. Some initial feedback:

• Currently as the button can cover some of the code if the first few lines are long enough. Maybe add additional padding to the <code> element?
• Remember to sort your CSS attributes in alphabetical order.
• There is a blue outline upon clicking the button, we should remove that.
• The checked icon change upon copying is good, we can take it one step further by notifying the user that the text has been copied. I am thinking of some hovering text ("Code copied to clipboard.") at the cursor that fades away after 3 seconds.

I added clipboard.min.js as an asset to handle the copy to clipboard logic, is there a better way to do this?

Is there a specific reason for using the library instead of just using document.execCommand("copy")?

Compatibility with old browsers (IE8 or earlier) is not important as we rely heavily on modern browser APIs in our components (especially responsive design).

[acjh]

Seems too much, it's noticeably further from the right than the top.

[acjh]

The copy icon seems more appropriate.

[Xenonym]

A more thorough implementation would require you to implement a code block component in vue, which can greatly extend customisation easily via props (E.G <codeblock no-copy>).

An alternative to this is to use the syntax from markdown-it-attrs (added in #557) for fenced code blocks to indicate the desire for a copy button eg. {.copy}:

```python {.copy}nums = [x for x in range(10)]```

However, due to the way highlight is implemented, we would have to override the default markdownit.renderer.rules.fence renderer instead of using highlight if we go with this (see Mermade/shins#33 for an example). I am not sure which would be better syntax or which would be easier to implement?

[damithc]

Note there are some more pending issues related to code blocks. You can consider them when making a decision. As we target project documentation, our code blocks feature needs to be pretty much the best in town.

[marvinchin]

Is this PR still in active development 😅 Looks like a useful feature!

[marvinchin]

I think the attributes should be ordered alphabetically for CSS 🙂

[Xenonym]

Now that we have support for plugins, perhaps this should be re-implemented as a plugin.

[amad-person]

Apologies, I haven't been able to work on this PR since I'm working on the conversion feature 😢

[damithc]

@amad-person do you plan to continue this PR? If not, go ahead and close it.

[amad-person]

I don't think I can work on this before the next sem starts 😅
Closing it for now

[yash-chowdhary]

@amad-person Could I have a shot at this if you're not working on it?

[amad-person]

Sure, thanks for taking it up