Add "copy to clipboard" button for code blocks (#2812)

* Add copy-to-clipboard button and JS

* Ignore line numbers if present

* Rewrite heading permalink code to use vanilla JS

* README: Add credits to zenorocha/clipboard.js (MIT License)

@iBug really wants a place here in the Credits section :P

* Add .no-copy for hiding the button, update docs

* Add td.rouge-code to selectors

* Fix navigator.clipboard branch

* Add screenreader text for copy button

* Restore focus to the button after copying

* Add site-wide enable switch
This commit is contained in:
iBug
2024-05-05 19:43:24 +08:00
committed by GitHub
parent c76813f6f5
commit 0527e17354
8 changed files with 199 additions and 26 deletions
+24
View File
@@ -296,6 +296,30 @@ For example,
}
```
### Code block copy button
To enable a copy button on code blocks, add the following to `_config.yml`:
```yaml
enable_copy_code_button: true
```
When enabled site-wide, the button can be disabled on individual code blocks by adding `no-copy` to the code block's class list.
````markdown
```
Hey, I have a "copy to clipboard" button!
```
````
````markdown
```
But I don't have one.
```
{: .no-copy}
````
{: .no-copy}
### Comments
[**Disqus**](https://disqus.com/), [**Discourse**](https://www.discourse.org/), [**Facebook**](https://developers.facebook.com/docs/plugins/comments), [**utterances**](https://utteranc.es/), [**giscus**](https://giscus.app/) and static-based commenting via [**Staticman**](https://staticman.net/) are built into the theme. First set the comment provider you'd like to use: