feat:#1 添加代码高亮插件

assets/scss/index.dark.scss

@@ -1,6 +1,6 @@
-html.dark body{
+html.dark body {
   /* 自定义深色背景颜色 */
-  --custom-app-color:#ffffff;
+  --custom-app-color: #ffffff;
   --custom-app-bg-color: #000000;
 }
 
@@ -18,4 +18,35 @@ html.dark .post-detail-content-box table th {
 html.dark .post-detail-content-box table td {
   border-color: #ccc;
   background-color: #161616;
+}
+
+/** dark code */
+html.dark .post-detail-content-box .hljs {
+  color: #ffffff;
+  background-color: #161616 !important;
+  border: 1px solid #ccc !important;
+}
+
+html.dark code {
+  color: #2fd945 !important;
+}
+
+html.dark .hljs-keyword,
+html.dark .hljs-selector-tag,
+html.dark .hljs-built_in,
+html.dark .hljs-name,
+html.dark .hljs-tag {
+  color: #539dc5 !important;
+}
+
+html.dark .post-detail-content-box .hljs-string,
+html.dark .post-detail-content-box .hljs-title,
+html.dark .post-detail-content-box .hljs-section,
+html.dark .post-detail-content-box .hljs-attribute,
+html.dark .post-detail-content-box .hljs-literal,
+html.dark .post-detail-content-box .hljs-template-tag,
+html.dark .post-detail-content-box .hljs-template-variable,
+html.dark .post-detail-content-box .hljs-type,
+html.dark .post-detail-content-box .hljs-addition {
+  color: #2fd945 !important;
 }

package.json

@@ -29,6 +29,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "arraybuffer-xml-parser": "^0.6.0",
     "element-plus": "^2.2.15",
+    "highlight.js": "^11.6.0",
     "pinia": "^2.0.23",
     "showdown": "^2.1.0",
     "vue": "^3.2.40",

pages/post/[postid].vue

@@ -36,11 +36,9 @@
     -->
 
     <!-- 文章详情 -->
-    <!--
-      v-hilight
-    -->
     <div
         id="postContent"
+        v-highlight
         v-html="postObj.description"
     ></div>
 

plugins/hljs/codecopy/codecopy.css

@@ -0,0 +1,54 @@
+.hljs-copy-wrapper {
+    position: relative;
+    overflow: hidden;
+}
+.hljs-copy-wrapper:hover .hljs-copy-button,
+.hljs-copy-button:focus {
+    transform: translateX(0);
+}
+.hljs-copy-button {
+    position: absolute;
+    transform: translateX(calc(100% + 1.125em));
+    top: 1em;
+    right: 1em;
+    width: 2rem;
+    height: 2rem;
+    text-indent: -9999px; /* Hide the inner text */
+    color: #fff;
+    border-radius: 0.25rem;
+    border: 1px solid #ffffff22;
+    /*background-color: #2d2b57;*/
+    background-color: #0d6efd;
+    background-image: url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>');
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: background-color 200ms ease, transform 200ms ease-out;
+    cursor: pointer;
+}
+.hljs-copy-button:hover {
+    border-color: #ffffff44;
+}
+.hljs-copy-button:active {
+    border-color: #ffffff66;
+}
+.hljs-copy-button[data-copied="true"] {
+    text-indent: 0px; /* Shows the inner text */
+    width: auto;
+    background-image: none;
+}
+@media (prefers-reduced-motion) {
+    .hljs-copy-button {
+        transition: none;
+    }
+}
+
+/* visually-hidden */
+.hljs-copy-alert {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}

plugins/hljs/codecopy/index.js

@@ -0,0 +1,95 @@
+/**
+ *  @file highlight-copy.js
+ *  @author Arron Hunt <arronjhunt@gmail.com>
+ *  @copyright Copyright 2021. All rights reserved.
+ */
+
+/**
+ * Adds a copy button to highlightjs code blocks
+ */
+export class CopyButtonPlugin {
+    /**
+     * Create a new CopyButtonPlugin class instance
+     * @param {Object} [options] - Functions that will be called when a copy event fires
+     * @param {CopyCallback} [options.callback]
+     * @param {Hook} [options.hook]
+     */
+    constructor(options = {}) {
+        // this.hook = options.hook;
+        // this.callback = options.callback;
+    }
+
+    // @ts-ignore
+    "after:highlightElement"({el, text}) {
+        // Create the copy button and append it to the codeblock.
+        const button = Object.assign(document.createElement("button"), {
+            innerHTML: "Copy",
+            className: "hljs-copy-button"
+        });
+        // @ts-ignore
+        button.dataset.copied = false;
+        el.parentElement.classList.add("hljs-copy-wrapper");
+        el.parentElement.appendChild(button);
+
+        // Add a custom proprety to the code block so that the copy button can reference and match its background-color value.
+        el.parentElement.style.setProperty(
+            "--hljs-theme-background",
+            window.getComputedStyle(el).backgroundColor
+        );
+
+        button.onclick = function () {
+            if (!navigator.clipboard) return;
+
+            let newText = text;
+            // @ts-ignore
+            // eslint-disable-next-line no-undef
+            // if (hook && typeof hook === "function") {
+            //     // @ts-ignore
+            //     // eslint-disable-next-line no-undef
+            //     newText = hook(text, el) || text;
+            // }
+
+            navigator.clipboard
+                .writeText(newText)
+                .then(function () {
+                    button.innerHTML = "复制成功";
+                    // @ts-ignore
+                    button.dataset.copied = true;
+
+                    let alert = Object.assign(document.createElement("div"), {
+                        role: "status",
+                        className: "hljs-copy-alert",
+                        innerHTML: "复制到剪贴板"
+                    });
+                    el.parentElement.appendChild(alert);
+
+                    setTimeout(() => {
+                        button.innerHTML = "Copy";
+                        // @ts-ignore
+                        button.dataset.copied = false;
+                        el.parentElement.removeChild(alert);
+                        // @ts-ignore
+                        alert = null;
+                    }, 2000);
+                })
+                .then(function () {
+                    // @ts-ignore
+                    // eslint-disable-next-line no-undef
+                    if (typeof callback === "function") return callback(newText, el);
+                });
+        };
+    }
+}
+
+/**
+ * @typedef {function} CopyCallback
+ * @param {string} text - The raw text copied to the clipboard.
+ * @param {HTMLElement} el - The code block element that was copied from.
+ * @returns {undefined}
+ */
+/**
+ * @typedef {function} Hook
+ * @param {string} text - The raw text copied to the clipboard.
+ * @param {HTMLElement} el - The code block element that was copied from.
+ * @returns {string|undefined}
+ */

plugins/hljs/vue-hljs/main.js

@@ -0,0 +1,78 @@
+import Hljs from "highlight.js";
+import {CopyButtonPlugin} from "../codecopy";
+import "../codecopy/codecopy.css";
+import "./vs.css";
+
+const vueHljs = {};
+
+vueHljs.install = Vue => {
+    // 代码复制
+    Hljs.addPlugin(
+        new CopyButtonPlugin()
+    );
+
+    Vue.directive("highlight", el => {
+        const blocks = el.querySelectorAll("pre code");
+        Array.prototype.forEach.call(blocks, Hljs.highlightBlock);
+
+        // 代码选项卡
+        // 代码块
+        const codeGroups = el.querySelectorAll("code-group");
+        // 处理每个代码块
+        codeGroups.forEach(group => {
+            // 防止重复添加
+            if (group.getElementsByTagName("ul").length === 0) {
+                const newNode = document.createElement("ul");
+                newNode.setAttribute("class", "code-tab");
+
+                const codeBlocks = group.querySelectorAll("code-block");
+                codeBlocks.forEach(block => {
+                    const title = block.attributes.getNamedItem("title")?.value;
+                    const active = block.attributes.getNamedItem("active")?.value;
+                    const isActive = active !== undefined;
+                    // console.log(block.attributes.length)
+                    // console.log(title)
+                    // console.log(isActive)
+
+                    const item = document.createElement("li");
+                    item.setAttribute(
+                        "class",
+                        isActive ? "code-tab-item current" : "code-tab-item"
+                    );
+                    item.innerHTML = title || "";
+                    item.addEventListener("click", function (event) {
+                        const targetElement = event.target;
+                        // 选择状态
+                        // console.log(codeBlocks[0].innerHTML)
+                        const allLis = targetElement.parentElement.querySelectorAll("li");
+                        allLis.forEach(li => {
+                            li.setAttribute("class", "code-tab-item");
+                        });
+                        targetElement.setAttribute("class", "code-tab-item current");
+
+                        // 设置tab
+                        codeBlocks.forEach(cb => {
+                            if (
+                                cb.attributes.getNamedItem("title")?.value ===
+                                targetElement.innerHTML
+                            ) {
+                                cb.setAttribute("active", "");
+                            } else {
+                                cb.removeAttribute("active");
+                            }
+                        });
+                        // console.log(targetElement.innerHTML);
+                    });
+
+                    newNode.append(item);
+                });
+
+                const firstBlock = codeBlocks[0];
+                firstBlock?.parentNode?.insertBefore(newNode, firstBlock);
+                // console.log("tab")
+            }
+        });
+    });
+};
+
+export default vueHljs;

plugins/hljs/vue-hljs/vs.css

@@ -0,0 +1,52 @@
+code{
+  font-family: "LXGW WenKai","Wenquanyi Micro Hei","Wenquanyi Micro Hei Mono","Microsoft YaHei", "PT Sans", "-apple-system", "Liberation Mono", monospace, dejavu sans mono,Fira Code,Microsoft Yahei,Consolas,Courier New,monospace,Menlo,Monaco !important;
+  font-size: 14px;  color: red;
+}
+.hljs {
+  font-family: "LXGW WenKai","Wenquanyi Micro Hei","Wenquanyi Micro Hei Mono","Microsoft YaHei", "PT Sans", "-apple-system", "Liberation Mono", monospace, dejavu sans mono,Fira Code,Microsoft Yahei,Consolas,Courier New,monospace,Menlo,Monaco !important;
+  font-size: 14px;
+  display: block;
+  overflow-x: auto;
+  padding: .5em;
+  line-height: 1.6;
+  color: black;
+  background-color: #f5f5f5!important;
+  /*border: 1px solid #ccc!important;*/
+  border-radius: 3px!important;
+}
+
+.hljs-comment, .hljs-quote, .hljs-variable {
+    color: #008000
+}
+
+.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
+    color: #00f
+}
+
+.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition {
+    color: #a31515
+}
+
+.hljs-deletion, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-meta {
+    color: #2b91af
+}
+
+.hljs-doctag {
+    color: #808080
+}
+
+.hljs-attr {
+    color: #f00
+}
+
+.hljs-symbol, .hljs-bullet, .hljs-link {
+    color: #00b0e8
+}
+
+.hljs-emphasis {
+    font-style: italic
+}
+
+.hljs-strong {
+    font-weight: bold
+}