✨ Add code copy buttons

assets/css/compiled/main.css

@@ -1022,11 +1022,73 @@ body a, body button {
   margin-right: 0px;
 }
 
+/* Code Copy */
+
+.highlight-wrapper {
+  display: block;
+}
+
+.highlight {
+  position: relative;
+  z-index: 0;
+}
+
+.highlight:hover > .copy-button {
+  visibility: visible;
+}
+
+.copy-button {
+  visibility: hidden;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 10;
+  width: 5rem;
+  cursor: pointer;
+  white-space: nowrap;
+  border-bottom-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity));
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
+  opacity: 0.9;
+}
+
+.dark .copy-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-600), var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
+}
+
+.copy-button:hover, .copy-button:focus, .copy-button:active, .copy-button:active:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
+}
+
+.dark .copy-button:hover, .dark .copy-button:focus, .dark .copy-button:active, .dark .copy-button:active:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
+}
+
+.copy-textarea {
+  position: absolute;
+  z-index: -10;
+  opacity: 0.05;
+}
+
 /* -- Chroma Highlight -- */
 
 /* Background */
 
 .prose .chroma {
+  position: static;
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));