mirror of https://github.com/docker/docs.git
add code copy feature (#15910)
Signed-off-by: David Karlsson <david.karlsson@docker.com>
This commit is contained in:
parent
75ea0f0bd4
commit
24158cc3c2
|
@ -68,6 +68,7 @@
|
||||||
<script defer src="/assets/jquery/jquery.js"></script>
|
<script defer src="/assets/jquery/jquery.js"></script>
|
||||||
<script defer src="/assets/bootstrap/js/bootstrap.min.js"></script>
|
<script defer src="/assets/bootstrap/js/bootstrap.min.js"></script>
|
||||||
<script defer src="/assets/js/docs.js"></script>
|
<script defer src="/assets/js/docs.js"></script>
|
||||||
|
<script defer src="/assets/js/copy.js"></script>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{%- if site.local_search -%}
|
{%- if site.local_search -%}
|
||||||
<script defer src="/assets/js/search.js"></script>
|
<script defer src="/assets/js/search.js"></script>
|
||||||
|
|
|
@ -46,6 +46,15 @@ code {
|
||||||
|
|
||||||
.highlighter-rouge {
|
.highlighter-rouge {
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
button.copy {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
// copy code icon markup
|
||||||
|
const copyIcon = `<svg aria-hidden="true" data-testid="geist-icon" fill="none" height="18" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="18" style="color: currentcolor;"><path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"></path></svg>`
|
||||||
|
|
||||||
|
// insert copy buttons for code blocks
|
||||||
|
const codeBlocks = document.querySelectorAll("div.highlighter-rouge")
|
||||||
|
codeBlocks.forEach((codeBlock) => {
|
||||||
|
codeBlock.insertAdjacentHTML(
|
||||||
|
"afterbegin",
|
||||||
|
`<button class="copy" aria-label="Copy code to clipboard">${copyIcon}</button>`
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
// handler that saves the code block innerText to clipboard
|
||||||
|
function copyCodeBlock(event) {
|
||||||
|
const copyButton = event.currentTarget
|
||||||
|
const codeBlock = copyButton.parentElement.querySelector("pre.highlight code")
|
||||||
|
const code = codeBlock.innerText.trim()
|
||||||
|
window.navigator.clipboard.writeText(code)
|
||||||
|
|
||||||
|
// change the button text temporarily
|
||||||
|
copyButton.textContent = "Copied!"
|
||||||
|
setTimeout(() => copyButton.innerHTML = copyIcon, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
// register event listeners for copy buttons
|
||||||
|
const copyButtons = document.querySelectorAll("button.copy")
|
||||||
|
copyButtons.forEach((btn) => {
|
||||||
|
btn.addEventListener("click", copyCodeBlock)
|
||||||
|
})
|
Loading…
Reference in New Issue