Add copy code button to code fragments in descriptions

[jorg-vr]

This pull request adds a copy code button to code fragments in descriptions.

I matched on the <pre><code></code></pre> html tags in descriptions to match all logical cases. This tag is also correctly used by markdown.

Should the copying fail, it selects the text and suggests to use Ctrl + c

Closes #3532

[niknetniko]

• For some reason it doesn't seem to work for me in Chrome (using version 111).
• The error message that appears is also not that useful I think ("Druk Ctrl-C om te kopiëren")
• Some (or most?) of the HTML problem statements don't use a <code> tag, only a <pre>, so they don't get a button.

[jorg-vr]

• For some reason it doesn't seem to work for me in Chrome (using version 111).

Fixed, it needed extra permissions because it is in an Iframe

• The error message that appears is also not that useful I think ("Druk Ctrl-C om te kopiëren")

I now actually select the text if copying failed.

• Some (or most?) of the HTML problem statements don't use a <code> tag, only a <pre>, so they don't get a button.

These problem statements do not follow the specification: https://docs.dodona.be/nl/references/exercise-description/#blokken-code Thus we cannot guarantee the layout.

I did update the matching form code to pre code, to avoid matching inline code

[niknetniko]

Would it be an idea to trim the copied code? For example, when copying this code:

It will result in this being copied:

Looks good otherwise.

[bmesuere]

Something goes wrong with inline code. They are now rendered as a block:
Before:

After:

The background of the "button" is transparent which causes un unwanted effect:

[jorg-vr]

Something goes wrong with inline code. They are now rendered as a block:

Forgot to push the fix for this

Would it be an idea to trim the copied code?

That was an artifact of adding the copy button inside the codeblock. The copy button is now no longer included in the copied text. I prefer this solution to a trim, because leading and ending whitespace might be relevant in some code examples.

The background of the "button" is transparent which causes un unwanted effect:

Fixed

[bmesuere]

Can we also replace the existing copy buttons by the new web component?