feat: [copy]代码块点击复制.

package-lock.json

@@ -5,6 +5,9 @@
   "packages": {
     "": {
       "name": "rrpg.link_frontend",
+      "dependencies": {
+        "marked": "^9.1.3"
+      },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^2",
         "@zerodevx/svelte-toast": "^0.9.5",
@@ -1591,6 +1594,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/marked": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.3.tgz",
+      "integrity": "sha512-XPU/J7GzU/n4voCSw1VYggtr3W5C2OeGkwEbe5PIQdA8thaie2Qw+fig6iNidKNDokTNcyR4OE9fMK14P6rqPg==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -3645,6 +3659,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.13"
       }
     },
+    "marked": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.3.tgz",
+      "integrity": "sha512-XPU/J7GzU/n4voCSw1VYggtr3W5C2OeGkwEbe5PIQdA8thaie2Qw+fig6iNidKNDokTNcyR4OE9fMK14P6rqPg=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",

package.json

@@ -19,5 +19,8 @@
     "tailwindcss": "^3",
     "vite": "^4",
     "vite-plugin-env-command": "^1.0.8"
+  },
+  "dependencies": {
+    "marked": "^9.1.3"
   }
 }

src/Content.svelte

@@ -6,6 +6,7 @@
   import { debounceImmediate } from './utils';
   import MedalWrap from './components/MedalWrap.svelte';
   import MedalItemDetail from './components/MedalItemDetail.svelte';
+  import Markdown from './components/Markdown.svelte';
 
   /**开发模式下 console.log debug 函数
    * @param str
@@ -49,6 +50,10 @@
     }
   }
 
+  // -----------------------------
+
+  $: markdown = $_cheatHint.replaceAll('[copy]', '```javascript\n').replaceAll('[/copy]', '\n```');
+
   // -----------------------------
   // 各种请求封装头
 
@@ -405,8 +410,9 @@
     $_cheatWindow = false;
   }}
 >
-  <div class="carousel w-full h-60">
-    {$_cheatHint}
+  <div class="w-full h-60">
+    <!-- {$_cheatHint} -->
+    <Markdown {markdown} />
   </div>
 </MedalWrap>
 

src/app.css

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+code.language-javascript {
+  display: block;
+  overflow: hidden;
+  overflow-x: scroll;
+
+  margin: 6px 0;
+  padding: 10px;
+
+  background: grey;
+  border-radius: var(--rounded-box, 1rem);
+}

src/components/Markdown.svelte

+<script>
+  import { onMount } from 'svelte';
+  import { marked } from 'marked';
+  import { toast } from '@zerodevx/svelte-toast';
+
+  export let markdown = '';
+
+  let dom;
+
+  onMount(() => {
+    // console.log(dom);
+    let doms = dom.querySelectorAll('code.language-javascript');
+
+    // console.log(doms);
+    doms.forEach(element => {
+      // console.log(element);
+      element.onclick = () => {
+        // 已复制
+        toast.push('已复制成功~');
+        copyText(element.innerText);
+      };
+    });
+  });
+
+  function copyText(text) {
+    const copy = function (event) {
+      let clipboardData = event.clipboardData || window.clipboardData;
+      clipboardData.setData('text/plain', text);
+      event.preventDefault();
+    };
+    document.addEventListener('copy', copy);
+    document.execCommand('copy');
+    document.removeEventListener('copy', copy);
+  }
+</script>
+
+<div bind:this={dom} class="flex flex-col">
+  {@html marked(markdown)}
+</div>