diff --git a/assets/js/code-copy.js b/assets/js/code-copy.js index 45df96a6..ba0328f8 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 d768f075..8821967d 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 3d88604c..e25ca5cf 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 fe3bbd4a..e5031def 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 a31683fb..e5da0612 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 b67ca6cf..1e23bd91 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 -}}