@@ -9,24 +77,87 @@ import { marked } from 'marked';
import hljs from "highlight.js";
//可以设置加载样式切换主题
-import 'highlight.js/styles/atom-one-dark.css'
+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 outputHtml = ref("")
const props = defineProps(['code'])
-watch(props,(n,o)=>{
+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;
+ // 将代码包裹在 textarea 中,由于防止textarea渲染出现问题,这里将 "<" 用 "<" 代替,不影响复制功能
+ let html = `
`;
+ codeCopyDic.push({id: codeIndex,code:code});
+ console.log(codeCopyDic.length);
+ return html;
+ //
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+}
+//左侧导航栏处理
+const navHandler = (code) => {
+ //获取行数
+ var linesCount = getLinesCount(code);
+
+ var currentLine = 1;
+ var liHtml = ``;
+ while (linesCount + 1 >= currentLine) {
+ liHtml += `
${currentLine}`
+ currentLine++
+ }
+
+ let html = `
`
+
+
+ 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) {
- 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
tables: true,//支持表格
-
+
breaks: true,
sanitize: false,
smartLists: true,
@@ -36,8 +167,11 @@ watch(props,(n,o)=>{
}
);
//需要注意代码块样式
- outputHtml.value = marked(n.code).replace(/
/g, "")
-},{immediate:true,deep:true})
-
+ const soureHtml = marked(n.code);
+ outputHtml.value= soureHtml.replace(//g, '');
+ nextTick(()=>{
+ addCopyEvent();
+ })
+}, { immediate: true, deep: true })
diff --git a/Yi.Bbs.Vue3/src/components/InfoCard.vue b/Yi.Bbs.Vue3/src/components/InfoCard.vue
index 4bf2469e..2820ecb0 100644
--- a/Yi.Bbs.Vue3/src/components/InfoCard.vue
+++ b/Yi.Bbs.Vue3/src/components/InfoCard.vue
@@ -2,7 +2,12 @@
import { ref } from "vue";
const props = defineProps(["items", "header", "text", "hideDivider", "height"]);
+const emit = defineEmits(['onClickText'])
const height = ref(props.height + "px");
+
+const onClickText=()=>{
+ emit('onClickText')
+}
@@ -10,7 +15,7 @@ const height = ref(props.height + "px");
diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue
index 00261daa..eb8a6420 100644
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -6,22 +6,11 @@