forked from drowl87/hextra_mirror
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
This commit is contained in:
Xin
GitHub
parent
8801a04ebe
commit
c2d7ba8ce5
@ -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 () {
|
||||
|
||||
@ -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!
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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 →"
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user