Prevent code to be executed multiple times

Damn, it's still there..

It's not the wrapping..

It's ClipboardJS that creates these duplicates..

Ahhhh now I get it..

Look:

First we run this: once('highlight_js', 'code', context).forEach(function (element) {

And inside there we run this: $('code').each(function (i, block) {

So, there's always going to be exactly that amount of wrappers and highlighting attempts as there are <code> occurrences on the page.

This looks much nicer 🤩 Much better to remove the duplicate foreach 👍🏻

But..

..now we again run highlightAll multiple times:

once('highlight-js', 'pre code', context).forEach(function (block, i) {
  
  if (typeof hljs !== 'undefined') {
    hljs.highlightAll();
   }

which again results in browser console full of this:

So either we move hljs.highlightAll outside of the loop.

Or we hightlight each block separately via hljs.highlightBlock(block).

Seen on https://stackoverflow.com/a/15177245/2199525:

   $('pre code').each(function(i, e) {hljs.highlightBlock(e)});

highlightElement is working fine but now the copy functionality is missing. Looks like as if element.wrap('<div class="code-container"></div>'); is not executed, checking..

Ah, it is working, but only for <pre>, not for <code>..

Okay, I think I now managed to maintain the existing logic:

• Wrap all <code> elements for the copy functionality to work
• Only overflow-x on the <pre><code> elements (inline <code> elements without <pre> parent must not have it)
• Only syntax highlight on the <pre><code> elements (inline <code> elements without <pre> parent must not have it)

Our designers provided a nice design for the inline copy button.

I implemented this now (to all code blocks, not just the inline ones).

I needed to add two new config options success_bg_transparent and success_bg_color for it, and added backwards compatible values in an update hook.

On the way I also added the missing config install and schema.

It would be really easy now to also add an option inline_enable (default TRUE) to let people completely disable highlighting and copy functionality on inline elements.. We can then simply return early in the JS..

(I've left the success message icon out for now. Thinking it's maybe a bit too opinionated.)

(Or just we maybe add a textarea option in the config form allowing people to paste SVG markup? 🤔)

I added a CSS rule that simply hides the .copy-btn when the .copy-message is not empty. Since .copy-message always only gets populated after the button click and then emptied again after 2 seconds, that looks like a solid fix.

Latest feedback included: Inside big code blocks the button is inside the code block in the top right corner again.

I also managed to get the font-family inherited from the body tag instead of from the pre element (monospace).

Green lights from @f0ns over from the other issue:

https://www.drupal.org/project/highlight_js/issues/3550427#comment-16346547