init

src/components/highlight/main.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="code-block-container">
+    <pre v-if="highlightedCode"><code v-html="highlightedCode" class="hljs"></code></pre>
+    <button v-if="clipboard"
+        v-clipboard:copy="this.code"
+        v-clipboard:success="onCopySuccess"
+        class="copy-btn">
+      一键复制
+    </button>
+  </div>
+</template>
+
+<script>
+import hljs from 'highlight.js';
+import formatter from '@/utils/formatter';
+// 引入语言支持
+import json from 'highlight.js/lib/languages/json';
+import java from 'highlight.js/lib/languages/java';
+import javascript from 'highlight.js/lib/languages/javascript';
+import 'highlight.js/styles/github.css';
+
+export default {
+  props: {
+    code: {
+      type: String,
+      required: true
+    },
+    language: {
+      type: String,
+      default: 'javascript'
+    },
+    clipboard: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    highlightedCode() {
+      hljs.registerLanguage('json', json);
+      hljs.registerLanguage('java', java);
+      hljs.registerLanguage('javascript', javascript);
+      let code = this.code;
+      if (this.language === 'json') {
+        code = formatter.prettyCode(this.code);
+      }
+      return hljs.highlight(code, {language: this.language, ignoreIllegals: true}).value;
+    }
+  },
+  methods: {
+    onCopySuccess() {
+      this.$message.success('复制成功');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.code-block-container {
+  position: relative;
+  background-color: #f0f0f0;
+  width: 100%;
+  overflow-y: auto; /* 只显示纵向滚动条 */
+  overflow-x: hidden; /* 隐藏横向滚动条 */
+  white-space: pre-wrap; /* 防止内容溢出 */
+  word-wrap: break-word; /* 自动换行 */
+}
+
+pre {
+  margin: 0;
+  padding: 0.5em;
+  border-radius: 8px;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  padding: 0.25em 0.5em;
+  font-size: 0.75em;
+  color: #fff;
+  background-color: #606266;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.copy-btn:hover {
+  background-color: #909399;
+}
+</style>