From ce3f34bbc7b793b3c91a57056c9adf95d45d5a3e Mon Sep 17 00:00:00 2001 From: Simone <26844016+simonebortolin@users.noreply.github.com> Date: Tue, 27 Dec 2022 01:45:37 +0100 Subject: [PATCH] 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 --- _config.yml | 3 + _includes/icons/code_copy.html | 15 +++++ _layouts/default.html | 1 + _sass/code.scss | 108 +++++++++++++++++++++++++-------- assets/js/just-the-docs.js | 41 +++++++++++++ docs/ui-components/code.md | 11 ++++ 6 files changed, 154 insertions(+), 25 deletions(-) create mode 100644 _includes/icons/code_copy.html diff --git a/_config.yml b/_config.yml index 86706fb..2273e8b 100644 --- a/_config.yml +++ b/_config.yml @@ -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 diff --git a/_includes/icons/code_copy.html b/_includes/icons/code_copy.html new file mode 100644 index 0000000..02f5068 --- /dev/null +++ b/_includes/icons/code_copy.html @@ -0,0 +1,15 @@ + + + Copy + + + + + + + Copied + + + + + \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index f80f52d..7ac9269 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -40,6 +40,7 @@ layout: table_wrappers {% include icons/external_link.html %} + {% include icons/code_copy.html %}
diff --git a/_sass/code.scss b/_sass/code.scss index 1ac7adc..c12421b 100644 --- a/_sass/code.scss +++ b/_sass/code.scss @@ -3,12 +3,15 @@ // {% raw %} -code { - padding: 0.2em 0.15em; - font-weight: 400; - background-color: $code-background-color; - border: $border $border-color; - border-radius: $border-radius; +// This instruction applies to all queues not within 'pre', avoiding 'code' generated by the highlight. +:not(pre) { + & > code { + padding: 0.2em 0.15em; + font-weight: 400; + background-color: $code-background-color; + border: $border $border-color; + border-radius: $border-radius; + } } // Avoid appearance of dark border around visited code links in Safari @@ -47,18 +50,77 @@ a:visited code { // Kramdown line_numbers = true: fences have a wider gutter than with Liquid? // ```[LANG]...``` + +// the code may appear with 3 different types: +// container \ case: default case, code with line number, code with html rendering +// top level: div.highlighter-rouge, div.listingblock > div.content, figure.highlight +// second level: div.highlight, .table-wrapper, pre +// third level: pre.highlight, td.code, absent +// last level: code, pre, code (optionality) +// highlighter level: span, span, span +// the spacing are only in the second level for case 1, 3 and in the thirt level for case 2 + +// select top level container div.highlighter-rouge, -div.listingblock > div.content { - padding: $sp-3; +div.listingblock > div.content, +figure.highlight { margin-top: 0; margin-bottom: $sp-3; - overflow-x: auto; background-color: $code-background-color; border-radius: $border-radius; box-shadow: none; -webkit-overflow-scrolling: touch; + position: relative; + padding: 0; + + // copy button (or other button) + // the button appear only when there is a hover on the code or focus on button + > button { + width: $sp-3; + opacity: 0; + position: absolute; + top: 0; + right: 0; + border: $sp-3 solid $code-background-color; + background-color: $code-background-color; + color: $body-text-color; + box-sizing: content-box; + + svg { + fill: $body-text-color; + } + + &:active { + text-decoration: none; + outline: none; + opacity: 1; + } + + &:focus { + opacity: 1; + } + } + + // the button can be seen by doing a simple hover in the code, there is no need to go over the location of the button + &:hover { + > button { + cursor: copy; + opacity: 1; + } + } +} + +// setting the spacing and scrollbar on the second level for the first case +// remove all space on the second and thirt level +div.highlighter-rouge, +div.listingblock { + div.highlight { + overflow-x: auto; + padding: $sp-3; + margin: 0; + border: 0; + } - div.highlight, pre.highlight, code { padding: 0; @@ -69,19 +131,15 @@ div.listingblock > div.content { // {% highlight LANG %}...{% endhighlight %}, // {% highlight LANG linenos %}...{% endhighlight %}: -figure.highlight { - padding: $sp-3; - margin-top: 0; - margin-bottom: $sp-3; - overflow-x: auto; - background-color: $code-background-color; - border-radius: $border-radius; - box-shadow: none; - -webkit-overflow-scrolling: touch; +// setting the spacing and scrollbar on the second level for the thirt case +// the css rule are apply only to the last code enviroment +// setting the scroolbar +figure.highlight { pre, - code { - padding: 0; + :not(pre) > code { + overflow-x: auto; + padding: $sp-3; margin: 0; border: 0; } @@ -89,6 +147,8 @@ figure.highlight { // ```[LANG]...```, kramdown line_numbers = true, // {% highlight LANG linenos %}...{% endhighlight %}: + +// setting the spacing and scrollbar on the thirt level for the second case .highlight .table-wrapper { padding: 0; margin: 0; @@ -108,6 +168,7 @@ figure.highlight { td.gl { width: 1em; padding-right: $sp-3; + padding-left: $sp-3; } pre { @@ -116,10 +177,7 @@ figure.highlight { } } -// -// Code examples (rendered) -// - +// Code examples: html render of a code .code-example, .listingblock > .title { padding: $sp-3; diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index f3bd813..223f28b 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -479,6 +479,47 @@ jtd.onReady(function(){ scrollNav(); }); +// Copy button on code + + +{%- if site.enable_copy_code_button != false %} + +jtd.onReady(function(){ + + var codeBlocks = document.querySelectorAll('div.highlighter-rouge, div.listingblock, figure.highlight'); + + var svgCopied = ''; + var svgCopy = ''; + + codeBlocks.forEach(codeBlock => { + var copyButton = document.createElement('button'); + var timeout = null; + copyButton.type = 'button'; + copyButton.ariaLabel = 'Copy code to clipboard'; + copyButton.innerHTML = svgCopy; + codeBlock.append(copyButton); + + copyButton.addEventListener('click', function () { + if(timeout === null) { + var code = codeBlock.querySelector('code').innerText.trim(); + window.navigator.clipboard.writeText(code); + + copyButton.innerHTML = svgCopied; + + var timeoutSetting = 4000; + + timeout = setTimeout(function () { + copyButton.innerHTML = svgCopy; + timeout = null; + }, timeoutSetting); + } + }); + }); + +}); + +{%- endif %} + })(window.jtd = window.jtd || {}); {% include js/custom.js %} diff --git a/docs/ui-components/code.md b/docs/ui-components/code.md index 1cac8aa..a4092f1 100644 --- a/docs/ui-components/code.md +++ b/docs/ui-components/code.md @@ -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. \ No newline at end of file