feat: 新增代码样式及复制功能

Yi.Bbs.Vue3/src/components/ArticleContentInfo.vue

@@ -1,33 +1,69 @@
-<style scoped>
-::v-deep pre{
+<style scoped lang="scss">
+/*::v-dedp .markdown-body pre{
+    padding: 0 !important;
+}*/
+::v-deep  .pre-out
+{
+padding: 0;
+overflow-x: hidden;
+}
+::v-deep .pre {
     padding: 0;
     margin-bottom: 0;
-}
-::v-deep .header
-{
-    background-color: #409eff;
-    color: white;
-    height: 30px;
-    display: flex;
-    justify-content: flex-end;
-    padding-top: 10px;
-}
-::v-deep .code{
-padding: 0px 10px;
+    overflow-x: hidden;
+    .header {
+        background-color: #409eff;
+        color: white;
+        height: 30px;
+        display: flex;
+        justify-content: flex-end;
+        padding-top: 10px;
+
+
+        .language {}
+        .copy:hover {
+  cursor: pointer;
+}
+        .copy {
+            margin: 0px 10px;
+
+        }
+    }
+
+    .code-con {
+        display: flex;
+
+        .nav {
+            display: block;
+            background-color: #282C34;
+
+        }
+
+        .code {
+            display: block;
+            padding: 10px 10px;
+            font-size: 14px;
+            line-height: 22px;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+
+    }
 
-    font-size: 14px;
-    line-height: 22px;
-    border-radius: 4px;
 
 }
-::v-deep .language
-{
 
-}
-::v-deep .copy
-{
-margin: 0px 10px;
+::v-deep .nav-ul {
+    border-right: 1px solid #FFFFFF;
+    margin-top: 12px;
+    padding-left: 10px;
+    padding-right: 2px;
 
+    .nav-li {
+        margin: 5.3px 0;
+        text-align: right;
+        margin-right: 3px;
+    }
 }
 </style>
 <template>
@@ -43,38 +79,80 @@ import hljs from "highlight.js";
 //可以设置加载样式切换主题
 import '@/assets/atom-one-dark.css'
 import '@/assets/github-markdown.css'
-import { ref, watch } from 'vue';
-
+import {nextTick , ref, watch } from 'vue';
+const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
 
 
 const outputHtml = ref("")
 const props = defineProps(['code'])
-const codeHandler = (code,language) => {
+let codeCopyDic=[];
+const addCopyEvent=()=>{
+    const copySpans = document.querySelectorAll('.copy');
+console.log(copySpans,"copySpans");
+// 为每个 copy span 元素添加点击事件
+copySpans.forEach(span => {
+    
+  span.addEventListener('click', async function() {
+   await navigator.clipboard.writeText(codeCopyDic.filter(x=>x.id==span.id)[0].code );
+   ElMessage({
+          message: "代码块复制成功",
+          type: "success",
+          duration: 2000,
+        });
+  });
+});
+}
+
+//code部分处理、高亮
+const codeHandler = (code, language) => {
     const codeIndex = parseInt(Date.now() + "") + Math.floor(Math.random() * 10000000);
     // 格式化第一行是右侧language和 “复制” 按钮；
-
     if (code) {
+        const navCode = navHandler(code)
         try {
             // 使用 highlight.js 对代码进行高亮显示
-            const preCode =hljs.highlightAuto(code).value;
+            const preCode = hljs.highlightAuto(code).value;
             // 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "&lt;" 代替，不影响复制功能
-            let html = `<pre class='hljs'><div class="header"><span class="language">${language}</span><span class="copy">复制代码</span></div><code class="code">${preCode}</code></pre>`;
-
+            let html = `<pre  class='hljs pre'><div class="header"><span class="language">${language}</span><span class="copy" id="${codeIndex}">复制代码</span></div><div class="code-con"><div class="nav">${navCode}</div><code class="code">${preCode}</code></div></pre>`;
+            codeCopyDic.push({id: codeIndex,code:code});
+            console.log(codeCopyDic.length);
             return html;
-                      //<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${code.replace(/<\/textarea>/g, "&lt;/textarea>")}</textarea>
+            //<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${code.replace(/<\/textarea>/g, "&lt;/textarea>")}</textarea>
         } catch (error) {
             console.log(error);
         }
     }
 
 }
+//左侧导航栏处理
+const navHandler = (code) => {
+    //获取行数
+    var linesCount = getLinesCount(code);
+
+    var currentLine = 1;
+    var liHtml = ``;
+    while (linesCount + 1 >= currentLine) {
+        liHtml += `<li class="nav-li">${currentLine}</li>`
+        currentLine++
+    }
+
+    let html = `<ul class="nav-ul">${liHtml}</ul>`
+
+
+    return html;
+}
+
+const getLinesCount = (text) => {
+    return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
+}
 
 watch(props, (n, o) => {
+    codeCopyDic=[];
     marked.setOptions({
         renderer: new marked.Renderer(),
-        highlight: function (code,language) {
-           return codeHandler(code,language);
-           // return hljs.highlightAuto(code).value;
+        highlight: function (code, language) {
+            return codeHandler(code, language);
+            // return hljs.highlightAuto(code).value;
         },
         pedantic: false,
         gfm: true,//允许 Git Hub标准的markdown
@@ -89,8 +167,11 @@ watch(props, (n, o) => {
     }
     );
     //需要注意代码块样式
-    outputHtml.value = marked(n.code);
+   const soureHtml  = marked(n.code);
+    outputHtml.value= soureHtml.replace(/<pre>/g, '<pre class="pre-out">');
+        nextTick(()=>{
+            addCopyEvent();
+        }) 
 }, { immediate: true, deep: true })
-
 </script>