Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-19 13:19:42 +02:00
Code Issues Releases Activity

feat: add copy button to code block

Browse source
This commit is contained in:
Aleksey Solovyev 2022-11-29 14:09:55 +03:00
parent dc0c32a93f
commit 1c3ada993e
2 changed files with 29 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/backend/views/pages/blocks/code.twig
View file

@ -1,4 +1,12 @@
<div class="block-code"> <div class="block-code">
<div class="block-code__content">{{ code|escape }}</div> <div class="block-code__wrapper">
<div class="block-code__content">{{ code | escape }}</div>
</div>
{%
include 'components/copy-button.twig' with {
ariaLabel: 'Copy Code to Clipboard',
class: 'block-code__copy-button',
textToCopy: code | escape,
}
%}
</div> </div>

21
src/frontend/styles/components/page.pcss
View file

@ -149,8 +149,18 @@
* ================== * ==================
*/ */
.block-code { .block-code {
@apply --text-code-block; position: relative;
@apply --squircle;
&:hover {
.block-code__copy-button {
opacity: 1;
}
}
&__wrapper {
@apply --text-code-block;
@apply --squircle;
}
&__content { &__content {
display: inline-block !important; display: inline-block !important;
@ -169,6 +179,13 @@
} }
} }
&__copy-button {
position: absolute;
top: 10px;
right: 10px;
opacity: 0;
}
.hljs-params { .hljs-params {
color: var(--color-code-params); color: var(--color-code-params);
} }