fix: use absolute positioning for copy button in code blocks (#684)

* fix: use absolute positioning for copy button in code blocks

The copy button was using `float: right` which caused it to take up
space in the document flow, resulting in an extra empty line appearing
at the bottom of code blocks.

Switch to `position: absolute` with `right: 1rem` and `bottom: 1rem`
to overlay the button without affecting the code block layout. This
also adds `position: relative` to `pre` elements to establish the
positioning context.

Refs: #635

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix: add code block toolbar with language label and copy button

Replace the floating copy button with a dedicated toolbar at the bottom
of code blocks that includes a language label and copy button. This
resolves the visual issue where the copy button caused an empty-line
appearance at the bottom of code blocks.

Changes:
- Add createToolbarElement() to generate toolbar with language label
- Update copy button click handler to use closest('pre') for robust
  DOM traversal
- Add .code-toolbar flex layout and .code-language styling
- Update print media query to hide toolbar instead of copy button

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: okuryu

src/generators/legacy-html/assets/api.js

@@ -180,7 +180,7 @@ const setupFlavorToggles = () => {
 const setupCopyButton = () => {
   document.querySelectorAll('.copy-button').forEach(button => {
     button.addEventListener('click', e => {
-      const parent = e.target.parentNode;
+      const parent = e.target.closest('pre');
       const flavorToggle = parent.querySelector('.js-flavor-toggle');
 
       let code;

src/generators/legacy-html/assets/style.css

@@ -540,7 +540,7 @@ tt,
 }
 
 pre {
-  padding: 1rem;
+  padding: 1rem 1rem 0.5rem;
   vertical-align: top;
   border-radius: 4px;
   margin: 1rem;
@@ -1014,8 +1014,24 @@ kbd {
   filter: invert(1);
 }
 
+.code-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid rgb(128 128 128 / 20%);
+}
+
+.code-language {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 700;
+  opacity: 0.6;
+}
+
 .copy-button {
-  float: right;
   outline: none;
   font-size: 10px;
   color: #fff;
@@ -1028,7 +1044,6 @@ kbd {
   text-transform: uppercase;
   font-weight: 700;
   padding: 0 0.5rem;
-  margin-right: 0.2rem;
   height: 1.5rem;
   transition-property:
     background-color, border-color, color, box-shadow, filter;
@@ -1132,7 +1147,7 @@ kbd {
     border-bottom: 1px solid var(--color-text-primary);
   }
 
-  .js-flavor-toggle ~ :not(.copy-button) {
+  .js-flavor-toggle ~ :not(.code-toolbar) {
     display: block !important;
     background-position: top right;
     background-size: 142px 20px;
@@ -1147,7 +1162,7 @@ kbd {
     background-image: url('./js-flavor-esm.svg');
   }
 
-  .copy-button {
+  .code-toolbar {
     display: none;
   }
 }

src/utils/highlighter.mjs

@@ -10,13 +10,18 @@ import shikiConfig from '../../shiki.config.mjs';
 // to attribute the current language of the <pre> element
 const languagePrefix = 'language-';
 
-// Creates a static button element which is used for the "copy" button
-// within codeboxes for copying the code to the clipboard
-const copyButtonElement = createElement(
-  'button',
-  { class: 'copy-button' },
-  'copy'
-);
+/**
+ * Creates a toolbar element with a language label and copy button.
+ *
+ * @param {string} languageId - The language identifier for the code block.
+ * @returns {import('hast').Element} The toolbar element.
+ */
+function createToolbarElement(languageId) {
+  return createElement('div', { class: 'code-toolbar' }, [
+    createElement('span', { class: 'code-language' }, languageId),
+    createElement('button', { class: 'copy-button' }, 'copy'),
+  ]);
+}
 
 /**
  * Checks if the given node is a valid code element.
@@ -103,8 +108,8 @@ export default function rehypeShikiji() {
       // Adds the original language back to the <pre> element
       children[0].properties.class = `${children[0].properties.class} ${codeLanguage}`;
 
-      // Adds the "copy" button to the <pre> element
-      children[0].children.push(copyButtonElement);
+      // Adds the toolbar (language label + copy button) to the <pre> element
+      children[0].children.push(createToolbarElement(languageId));
 
       // Replaces the <pre> element with the updated one
       parent.children.splice(index, 1, ...children);
@@ -165,7 +170,7 @@ export default function rehypeShikiji() {
                 checked: codeElements[0].properties.language === 'cjs',
               }),
               ...codeElements,
-              copyButtonElement,
+              createToolbarElement('javascript'),
             ]
           );