fix: code copy issue for code blocks in shortcode (#201)

* chore: add translation key for copy code button title

* chore: remove id from code block elements

* fix: copy the correct code target in code-copy.js

* chore: update details.md

* chore: remove console.log :)

* chore: remove `$` in shell commands

* chore: update docs

layouts/_default/_markup/render-codeblock.html

@@ -1,6 +1,7 @@
 {{- $class := .Attributes.class | default "" -}}
 {{- $filename := .Attributes.filename | default "" -}}
 {{- $lang := .Attributes.lang | default .Type -}}
+{{- $copyCode := (T "copyCode") | default "Copy code" -}}
 
 
 <div class="code-block relative mt-6 first:mt-0 group/code">
@@ -8,17 +9,14 @@
     <div class="filename">{{ $filename }}</div>
   {{- end -}}
   {{- if transform.CanHighlight $lang -}}
-    <div id="code-block-{{ .Ordinal }}">
-      {{- highlight .Inner $lang .Options -}}
-    </div>
+    <div>{{- highlight .Inner $lang .Options -}}</div>
   {{- else -}}
-    <pre><code id="code-block-{{ .Ordinal }}">{{ .Inner }}</code></pre>
+    <pre><code>{{ .Inner }}</code></pre>
   {{- end -}}
   <div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
     <button
       class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50"
-      title="Copy code"
-      data-clipboard-target="#code-block-{{ .Ordinal }}"
+      title="{{ $copyCode }}"
     >
       <div class="group-[.copied]/copybtn:hidden copy-icon pointer-events-none h-4 w-4"></div>
       <div class="hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4"></div>