Add code copy buttons using 'markdown-it-copy' plugin

src/parser/copycode.ts

@@ -0,0 +1,30 @@
+import MarkdownIt from 'markdown-it';
+import octicons from '@primer/octicons';
+
+const copyIcon = octicons['copy'].toSVG({ class: 'icon-copy' });
+const checkIcon = octicons['check'].toSVG({ class: 'icon-check' });
+const xIcon = octicons['x'].toSVG({ class: 'icon-x' });
+
+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);
+        const content = tokens[idx].content;
+        return `
+<div class="pre-wrapper" style="position: relative">
+    ${renderedPreBlock}
+    <div class="copy-wrapper">
+        <button class="copy-button" data-clipboard-text="${content.replaceAll('"', '&quot;')}">
+            ${copyIcon}
+        </button>
+        <div class="copy-success">
+            ${checkIcon}
+        </div>
+        <div class="copy-fail">
+            ${xIcon}
+        </div>
+    </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);

src/routes/viewer.ts

@@ -88,6 +88,8 @@ router.get(/.*/, async (req: Request, res: Response) => {
             </script>
             ${config.scripts ? `<script type="text/javascript">${config.scripts}</script>` : ''}
             <script type="module" src="/static/client.mjs"></script>
+            <script type="text/javascript" src="/static/copycode/clipboard.min.js"></script>
+            <script type="text/javascript" src="/static/copycode/client.js"></script>
         </html>
     `);
 });

static/colors.css

@@ -19,6 +19,13 @@
     --icon-file: var(--text-secondary);
     --icon-back: var(--text-secondary);
 
+    --copy-button-fg: #aaa;
+    --copy-button-bg: #333;
+    --copy-success-fg: #ddffcc;
+    --copy-success-bg: #5c993d;
+    --copy-fail-fg: #ffcccc;
+    --copy-fail-bg: #993d3d;
+
     --syntax-text: var(--text-primary);
     --syntax-keyword: #aed7ff;
     --syntax-entity: #aeafff;
@@ -69,6 +76,13 @@
         --icon-file: #636c76;
         --icon-back: var(--text-secondary);
 
+        --copy-button-fg: #1f2328;
+        --copy-button-bg: #e7e9eb;
+        --copy-success-fg: #154000;
+        --copy-success-bg: #c7e6b8;
+        --copy-fail-fg: #400000;
+        --copy-fail-bg: #e6b8b8;
+
         /* source for light mode syntax theme:
          * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
          * */

static/copycode/client.js

@@ -0,0 +1,26 @@
+document.querySelectorAll('.copy-success, .copy-fail').forEach((element) => {
+    element.style.display = 'none';
+});
+
+const Notify = {
+    Success: '.copy-success',
+    Fail: '.copy-fail',
+};
+
+let clipboard = new ClipboardJS('.copy-button');
+
+clipboard.on('success', function (e) {
+    showNotification(e.trigger, Notify.Success);
+});
+
+clipboard.on('error', function (e) {
+    showNotification(e.trigger, Notify.Fail);
+});
+
+function showNotification(btn, notify) {
+    const notificationElement = btn.parentElement.querySelector(notify);
+    notificationElement.style.display = 'flex';
+    setTimeout(() => {
+        notificationElement.style.display = 'none';
+    }, 2000);
+}

static/markdown.css

@@ -180,6 +180,50 @@ blockquote {
     color: var(--alert-caution);
 }
 
+/* --------------------------------------------------------------------------
+ * COPY-CODE-BUTTON --------------------------------------------------------- */
+
+.copy-wrapper {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+}
+.copy-button, .copy-success, .copy-fail {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2rem;
+    width: 2rem;
+    padding: 0.4rem;
+    border: 0;
+    border-radius: 0.4rem;
+    background: none;
+    fill: var(--copy-button-fg);
+    cursor: pointer;
+    transition: opacity 0.2s, background 0.2s;
+}
+.copy-button {
+    opacity: 0;
+}
+pre:hover + .copy-wrapper > .copy-button {
+    opacity: 0.3;
+}
+.copy-button:hover {
+    opacity: 1;
+    background-color: var(--copy-button-bg);
+}
+.copy-success {
+    background: var(--copy-success-bg);
+    fill: var(--copy-success-fg);
+}
+.copy-fail {
+    background: var(--copy-fail-bg);
+    fill: var(--copy-fail-fg);
+}
+
 /* --------------------------------------------------------------------------
  * MISCELLANEOUS ------------------------------------------------------------ */