Add copy code button to code snippets (#945)

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

View File

@@ -73,6 +73,9 @@ search:
# Supports true or false (default)
button: false
# For copy button on code
enable_copy_code_button: true
# To disable support for mermaid diagrams (https://mermaid-js.github.io/mermaid/),
# comment out the `mermaid` and `version` keys below
# By default, consuming the theme as a gem leaves mermaid disabled; it is opt-in