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

assets/js/code-copy.js

@@ -33,8 +33,8 @@ document.addEventListener('DOMContentLoaded', function () {
     // Add click event listener for copy button
     button.addEventListener('click', function (e) {
       e.preventDefault();
-      const targetId = button.getAttribute('data-clipboard-target');
-      const target = document.querySelector(targetId);
+      // Get the code target
+      const target = button.parentElement.previousElementSibling;
       let codeElement;
       if (target.tagName === 'CODE') {
         codeElement = target;
@@ -44,9 +44,12 @@ document.addEventListener('DOMContentLoaded', function () {
         codeElement = codeElements[codeElements.length - 1];
       }
       if (codeElement) {
+        let code = codeElement.innerText;
         // Replace double newlines with single newlines in the innerText
         // as each line inside <span> has trailing newline '\n'
-        const code = codeElement.innerText.replace(/\n\n/g, '\n');
+        if ("lang" in codeElement.dataset) {
+          code = code.replace(/\n\n/g, '\n');
+        }
         navigator.clipboard.writeText(code).then(function () {
           button.classList.add('copied');
           setTimeout(function () {

exampleSite/content/docs/advanced/customization.md

@@ -47,8 +47,8 @@ The primary color of the theme can be customized by setting the `--primary-hue`
 
 List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
 
-```bash
-$ hugo gen chromastyles --style=github
+```shell
+hugo gen chromastyles --style=github
 ```
 
 To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
@@ -70,4 +70,4 @@ For further information, refer to the [Hugo Templates](https://gohugo.io/templat
 
 ## Further Customization
 
-Didn't find what you were looking for? Feel free to [open an issue](https://github.com/imfing/hextra/issues) or make a contribution to the theme!
+Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme!

exampleSite/content/docs/getting-started.md

@@ -43,18 +43,18 @@ Before starting, you need to have the following software installed:
 ### Initialize a new Hugo site
 
 ```shell
-$ hugo new site my-site --format=yaml
+hugo new site my-site --format=yaml
 ```
 
 ### Configure Hextra theme via module
 
 ```shell
 # initialize hugo module
-$ cd my-site
-$ hugo mod init github.com/username/my-site
+cd my-site
+hugo mod init github.com/username/my-site
 
 # add Hextra theme
-$ hugo mod get github.com/imfing/hextra
+hugo mod get github.com/imfing/hextra
 ```
 
 Configure `hugo.yaml` to use Hextra theme by adding the following:
@@ -70,14 +70,14 @@ module:
 Create new content page for the home page and the documentation page:
 
 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```
 
 ### Preview the site locally
 
 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```
 
 Voila, your new site preview is available at `http://localhost:1313/`.
@@ -90,7 +90,7 @@ Voila, your new site preview is available at `http://localhost:1313/`.
 To update all Hugo modules in your project to their latest versions, run the following command:
 
 ```shell
-$ hugo mod get -u
+hugo mod get -u
 ```
 
 To update Hextra to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
@@ -119,7 +119,7 @@ Before starting, you need to have the following software installed:
 ### Initialize a new Hugo site
 
 ```shell
-$ hugo new site my-site --format=yaml
+hugo new site my-site --format=yaml
 ```
 
 ### Add Hextra theme as a Git submodule
@@ -139,14 +139,14 @@ theme: hextra
 Create new content page for the home page and the documentation page:
 
 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```
 
 ### Preview the site locally
 
 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```
 
 Your new site preview is available at `http://localhost:1313/`.
@@ -168,7 +168,7 @@ Failure to run this command results in the theme folder not being populated with
 To update all submodules in your repository to their latest commits, run the following command:
 
 ```shell
-$ git submodule update --remote
+git submodule update --remote
 ```
 
 To update Hextra to the latest commit, run the following command:

exampleSite/content/docs/guide/shortcodes/details.md

@@ -24,7 +24,7 @@ This will be hidden by default.
 
 ## Usage
 
-````
+````markdown
 {{%/* details title="Details" */%}}
 
 This is the content of the details.
@@ -34,7 +34,7 @@ Markdown is **supported**.
 {{%/* /details */%}}
 ````
 
-````
+````markdown
 {{%/* details title="Click me to reveal" closed="true" */%}}
 
 This will be hidden by default.

i18n/en.yaml

@@ -1,6 +1,7 @@
 backToTop: "Scroll to top"
 changeLanguage: "Change language"
 changeTheme: "Change theme"
+copyCode: "Copy code"
 copyright: "© 2023 Hextra Project."
 dark: "Dark"
 editThisPage: "Edit this page on GitHub →"

layouts/_default/_markup/render-codeblock.html

@@ -1,24 +1,22 @@
 {{- $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">
   {{- if $filename -}}
     <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>