copy to clipboard and code type information in the code block mentioned in the markdown

[automationxpert]

Is your feature request related to a problem? Please describe.

1. The code snippets used in the markdown files are doesn't show the code type mentioned in markdown.
2. The copy to clipboard option in the top right corner for each code snippets would be a great feature.

Describe the solution you'd like

1. The code snippets used in the markdown files are getting detected but would love to show what code it is such as bash, javascript, python, php, powershell etc just as mentioned in the markdown.
2. Also copy to clipboard option in the top right corner for each code snippets (where the button is changed upon click showing as copied with a color change for 3-4 seconds).

Describe alternatives you've considered I tried to implement the 2nd feature mentioned, but the copy button always ends at the left side bottom inspite of using the css. Please find the code i tried below:

var codeBlocks = document.querySelectorAll('pre.highlight');

codeBlocks.forEach(function (codeBlock) {
  var  Button = document.createElement('button');
   Button.className = ' ';
   Button.type = 'button';
   Button.ariaLabel = 'Copy code to clipboard';
   Button.innerText = 'Copy';

  codeBlock.append( Button);

   Button.addEventListener('click', function () {
    var code = codeBlock.querySelector('code').innerText.trim();
    window.navigator.clipboard.writeText(code);

     Button.innerText = 'Copied';
    var fourSeconds = 4000;

    setTimeout(function () {
       Button.innerText = 'Copy';
    }, fourSeconds);
  });
});

Placed the below in the _includes/head.html

<script src="/assets/js/codeblock.js"></script>

pre.highlight {
    padding: 8px 12px;
    position: relative;

    // override skeleton styles
    > code {
      border: 0;
      overflow-x: auto;
      padding-right: 0;
      padding-left: 0;
    }

    &.highlight {
      border-left: 15px solid #35383c;
      color: #c1c2c3;
      overflow: auto;
      white-space: pre;
      word-wrap: normal;

      &,
      code {
        background-color: #222;
        font-size: 14px;
      }
    }

    //   code to clipboard
    .  {
      color: #4AF626;
      position: absolute;
      right: 1.2rem;
      top: 1.2rem;
      opacity: 0;

      &:active,
      &:focus,
      &:hover {
        background: rgba(0, 0, 0, 0.7);
        opacity: 1;
      }
    }

    &:active . ,
    &:focus . ,
    &:hover .  {
      background: rgba(0, 0, 0, 0.7);
      opacity: 1;
    }
  } 

[github-actions[bot]]

Thanks for submitting an issue! I'll check it at as soon as possible and get back to you.