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