feat(#202): Add code copy button layout renderer

src/parser/copycode.ts

@@ -0,0 +1,19 @@
+import MarkdownIt from 'markdown-it';
+import octicons from '@primer/octicons';
+
+const copyIcon = octicons['copy'].toSVG({ class: 'icon-copy' });
+
+export default function copycode(md: MarkdownIt) {
+    const defaultRender = md.renderer.rules.fence!;
+    md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+        const renderedPreBlock = defaultRender(tokens, idx, options, env, self);
+        return `
+<div class="pre-wrapper" style="position: relative">
+    ${renderedPreBlock}
+    <div class="copy-wrapper">
+        <button class="copy-button">${copyIcon}</button>
+    </div>
+</div>
+`;
+    };
+}

src/parser/markdown.ts

@@ -1,5 +1,6 @@
 import MarkdownIt from 'markdown-it';
 import anchor from 'markdown-it-anchor';
+import copycode from './copycode.js';
 import frontMatter from 'markdown-it-front-matter';
 import highlight from './highlight.js';
 import graphviz from './dot.js';
@@ -68,6 +69,7 @@ mdit.use(anchor, {
         placement: 'before',
     }),
 });
+mdit.use(copycode);
 mdit.use(graphviz);
 mdit.use(githubAlerts);
 mdit.use(mermaid);

static/markdown.css

@@ -180,6 +180,35 @@ blockquote {
     color: var(--alert-caution);
 }
 
+/* --------------------------------------------------------------------------
+ * COPY-CODE-BUTTON --------------------------------------------------------- */
+
+.copy-wrapper {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+}
+.copy-button {
+    padding: 0.4rem;
+    border: 0;
+    border-radius: 0.4rem;
+    background: none;
+    opacity: 0;
+    outline: none;
+    cursor: pointer;
+    transition: opacity 0.2s, background 0.2s;
+}
+pre:hover + .copy-wrapper .copy-button {
+    opacity: 0.3;
+}
+.copy-button:hover {
+    opacity: 1;
+    background-color: var(--border-regular);
+}
+.copy-button {
+    fill: var(--text-primary);
+}
+
 /* --------------------------------------------------------------------------
  * MISCELLANEOUS ------------------------------------------------------------ */