diff --git a/_sass/_base.scss b/_sass/_base.scss
index b65b11c..fac1378 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -826,31 +826,23 @@ progress::-moz-progress-bar {
height: inherit;
}
-pre {
- padding: 8px 12px;
+/* Copy button */
+.code-display-wrapper {
position: relative;
- /* Copy code to clipboard button */
.copy {
background: var(--global-card-bg-color);
border-color: var(--global-bg-color);
border-radius: .3rem;
- border-style: solid;
+ border-style: none;
color: var(--global-text-color);
font-size: medium;
opacity: 0;
position: absolute;
- right: .25rem;
- top: .25rem;
-
- &:active,
- &:focus,
- &:hover {
- color: var(--global-hover-color);
- opacity: 1;
- }
+ right: .15rem;
+ top: .15rem;
}
-
+
&:active .copy,
&:focus .copy,
&:hover .copy {
diff --git a/assets/js/copy_code.js b/assets/js/copy_code.js
index b12af53..4018916 100644
--- a/assets/js/copy_code.js
+++ b/assets/js/copy_code.js
@@ -2,13 +2,13 @@
var codeBlocks = document.querySelectorAll('pre');
codeBlocks.forEach(function (codeBlock) {
if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) {
+ // create copy button
var copyButton = document.createElement('button');
copyButton.className = 'copy';
copyButton.type = 'button';
copyButton.ariaLabel = 'Copy code to clipboard';
copyButton.innerText = 'Copy';
copyButton.innerHTML = '';
- codeBlock.append(copyButton);
// get code from code block and copy to clipboard
copyButton.addEventListener('click', function () {
@@ -32,5 +32,15 @@ codeBlocks.forEach(function (codeBlock) {
copyButton.innerHTML = '';
}, waitFor);
});
+
+ // create wrapper div
+ var wrapper = document.createElement('div');
+ wrapper.className = 'code-display-wrapper';
+
+ // add copy button and code block to wrapper div
+ const parent = codeBlock.parentElement;
+ parent.insertBefore(wrapper, codeBlock);
+ wrapper.append(codeBlock);
+ wrapper.append(copyButton);
}
});