From c2d7ba8ce52306ddcc968cdaca5679ad7266e6fb Mon Sep 17 00:00:00 2001 From: Xin Date: Sat, 11 Nov 2023 20:14:39 -0500 Subject: [PATCH] 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 | 9 ++++--- .../content/docs/advanced/customization.md | 6 ++--- exampleSite/content/docs/getting-started.md | 26 +++++++++---------- .../content/docs/guide/shortcodes/details.md | 4 +-- i18n/en.yaml | 1 + .../_default/_markup/render-codeblock.html | 10 +++---- 6 files changed, 29 insertions(+), 27 deletions(-) diff --git a/assets/js/code-copy.js b/assets/js/code-copy.js index 45df96a..ba0328f 100644 --- a/assets/js/code-copy.js +++ b/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 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 () { diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index d768f07..8821967 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/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! diff --git a/exampleSite/content/docs/getting-started.md b/exampleSite/content/docs/getting-started.md index 3d88604..e25ca5c 100644 --- a/exampleSite/content/docs/getting-started.md +++ b/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: diff --git a/exampleSite/content/docs/guide/shortcodes/details.md b/exampleSite/content/docs/guide/shortcodes/details.md index fe3bbd4..e5031de 100644 --- a/exampleSite/content/docs/guide/shortcodes/details.md +++ b/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. diff --git a/i18n/en.yaml b/i18n/en.yaml index a31683f..e5da061 100644 --- a/i18n/en.yaml +++ b/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 →" diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html index b67ca6c..1e23bd9 100644 --- a/layouts/_default/_markup/render-codeblock.html +++ b/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" -}}
@@ -8,17 +9,14 @@
{{ $filename }}
{{- end -}} {{- if transform.CanHighlight $lang -}} -
- {{- highlight .Inner $lang .Options -}} -
+
{{- highlight .Inner $lang .Options -}}
{{- else -}} - 
{{ .Inner }}
+ 
{{ .Inner }}
{{- end -}}