steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-09-13 05:13:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add copy code button to code snippets (#945)

Browse Source 
Hello everyone, this is my implementation for the copy button on the snippet (requested in #924)

The implementation is made 100% javascript as with or without a jekyll template modification you still have to execute some javascript code, and I consider it the best choice.

the button only appears if the mouse is over it, to allow the entire line to be read

the important CSS changes were made to make the copy button work even in the long code situation:


![image](https://user-images.githubusercontent.com/26844016/187731472-d4bf7828-2356-4d94-9c2d-9db863228f5f.png)

to avoid this:

![image](https://user-images.githubusercontent.com/26844016/183292313-d7f73d7d-58c0-4c7b-b5ba-e08bd285514b.png)

Co-authored-by: Matt Wang <matt@matthewwang.me>
This commit is contained in:
Simone
2022-12-27 01:45:37 +01:00
committed by GitHub
parent 56bda83528
commit ce3f34bbc7
6 changed files with 154 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/ui-components/code.md
View File

@@ -143,3 +143,14 @@ graph TD;
```
*Note: for demonstration purposes, we've enabled mermaid on this site. It is still disabled by default, and users need to opt-in to use it.*
## Copy button
The copy button for code blocks can be enabled or disabled via the `enable_copy_code_button` key in `_config.yml`. By default, the value of this key is `false`; users need to opt-in.
```yaml
# For copy button on code
enable_copy_code_button: true
```
Note that this feature requires JavaScript; if JavaScript is disabled in the browser, this feature will not work.