Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add buttons to copy code block contents #345

Merged
merged 6 commits into from
Apr 10, 2021

Conversation

kdkasad
Copy link
Contributor

@kdkasad kdkasad commented Apr 4, 2021

Adds a clickable "copy" link in the top-right corner of each code block.

If available, uses the navigator.clipboard API. Falls back to selecting
the text and calling document.execCommand('copy') to copy text.

I mainly focused on functionality, not style, so let me know if you want it to look different.

I tested on both Chrome and Firefox on Linux, and it works using both the navigator.clipboard API and the fallback method in both browsers.

Closes #344

Adds a clickable "copy" link in the top-right corner of each code block.

If available, uses the navigator.clipboard API. Falls back to selecting
the text and calling document.execCommand('copy') to copy text.
@adityatelange
Copy link
Owner

@kdkasad Code looks good to me, works as expected !
Can you enable maintainer edits? so that I can change few styling stuff :)

assets/css/common/main.css Outdated Show resolved Hide resolved
layouts/partials/footer.html Show resolved Hide resolved
layouts/partials/footer.html Outdated Show resolved Hide resolved
assets/css/common/main.css Outdated Show resolved Hide resolved
layouts/partials/footer.html Outdated Show resolved Hide resolved
layouts/partials/footer.html Show resolved Hide resolved
layouts/partials/footer.html Show resolved Hide resolved
kdkasad added a commit to kdkasad-forks/hugo-PaperMod that referenced this pull request Apr 9, 2021
@kdkasad
Copy link
Contributor Author

kdkasad commented Apr 9, 2021

@kdkasad Code looks good to me, works as expected !
Can you enable maintainer edits? so that I can change few styling stuff :)

Maintainer edits are now enabled.

Also I decided to add translation keys to support other languages.

- change i18n ids to `code_copy` and `code_copied`
- refactor
@sonarcloud
Copy link

sonarcloud bot commented Apr 10, 2021

Kudos, SonarCloud Quality Gate passed!

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@adityatelange adityatelange merged commit 17c4da8 into adityatelange:master Apr 10, 2021
@adityatelange adityatelange added the enhancement New feature or improvement label Apr 10, 2021
@adityatelange
Copy link
Owner

@kdkasad I just noticed this doesn't work with

markup:
    highlight:
        lineNos: true

and code blocks not having a parent class highlight (ex. https://adityatelange.github.io/hugo-PaperMod/posts/markdown-syntax/)

@kdkasad
Copy link
Contributor Author

kdkasad commented Apr 10, 2021

@kdkasad I just noticed this doesn't work with

markup:
    highlight:
        lineNos: true

and code blocks not having a parent class highlight (ex. https://adityatelange.github.io/hugo-PaperMod/posts/markdown-syntax/)

It works fine with line numbers enabled for me. However you're right about it not working for non-highlight code blocks (i.e. ones indented with 4 spaces).

Edit: it also doesn't work for code blocks created using backticks with no syntax/language specified.

@adityatelange
Copy link
Owner

@kdkasad I just noticed this doesn't work with

markup:
    highlight:
        lineNos: true

and code blocks not having a parent class highlight (ex. https://adityatelange.github.io/hugo-PaperMod/posts/markdown-syntax/)

It works fine with line numbers enabled for me. However you're right about it not working for non-highlight code blocks (i.e. ones indented with 4 spaces).

Yes you are correct, it works fine with lineNos enabled. Maybe I should've restarted hugo's server.

@kdkasad kdkasad deleted the feature/copy-code branch April 15, 2021 16:50
kylethedeveloper pushed a commit to kylethedeveloper/hugo-PaperMod that referenced this pull request Feb 21, 2023
* add buttons to copy code block contents

Adds a clickable "copy" link in the top-right corner of each code block.

If available, uses the navigator.clipboard API. Falls back to selecting
the text and calling document.execCommand('copy') to copy text.

* hides copy button unless mouse is hovering over code block

* change text of copy button when text is copied

* add translation keys for copy button text  `code_copy` and `code_copied`

* To disable use `Params.disableCodeCopy: true` in site config
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or improvement
Projects
None yet
Development

Successfully merging this pull request may close these issues.