diff --git a/src/backend/views/pages/blocks/code.twig b/src/backend/views/pages/blocks/code.twig
index 663ff49..2402cb5 100644
--- a/src/backend/views/pages/blocks/code.twig
+++ b/src/backend/views/pages/blocks/code.twig
@@ -1,4 +1,12 @@
-
{{ code|escape }}
+
+ {%
+ include 'components/copy-button.twig' with {
+ ariaLabel: 'Copy Code to Clipboard',
+ class: 'block-code__copy-button',
+ textToCopy: code | escape,
+ }
+ %}
-
diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss
index c3846a1..20a408d 100644
--- a/src/frontend/styles/components/page.pcss
+++ b/src/frontend/styles/components/page.pcss
@@ -149,8 +149,18 @@
* ==================
*/
.block-code {
- @apply --text-code-block;
- @apply --squircle;
+ position: relative;
+
+ &:hover {
+ .block-code__copy-button {
+ opacity: 1;
+ }
+ }
+
+ &__wrapper {
+ @apply --text-code-block;
+ @apply --squircle;
+ }
&__content {
display: inline-block !important;
@@ -169,6 +179,13 @@
}
}
+ &__copy-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ opacity: 0;
+ }
+
.hljs-params {
color: var(--color-code-params);
}