From 72ba1691fbcf0285733f224b151df083757e7fab Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Mon, 20 Jan 2025 23:42:33 +0800
Subject: [PATCH] =?UTF-8?q?md=E6=B7=BB=E5=8A=A0hightlight=E6=94=AF?=
=?UTF-8?q?=E6=8C=81=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/codeMirror.vue | 103 ++++++++++++++--
components/markdownRender.vue | 15 ++-
components/miaoCollapse.vue | 4 +-
package.json | 9 ++
pnpm-lock.yaml | 224 ++++++++++++++++++++++++++++++++++
utils/html2VNode.ts | 60 +++++++--
6 files changed, 391 insertions(+), 24 deletions(-)
diff --git a/components/codeMirror.vue b/components/codeMirror.vue
index 6b3f583..961c932 100644
--- a/components/codeMirror.vue
+++ b/components/codeMirror.vue
@@ -12,6 +12,7 @@
+
@@ -23,29 +24,116 @@ import { EditorState } from "@codemirror/state"
// import {javascript} from "@codemirror/lang-javascript"
const props = defineProps<{
- data: string
+ data: string,
+ type?: string,
}>()
const show = ref(true)
const cmRootRef = ref()
-onMounted(() => {
- if (!cmRootRef.value) {
- return
+const isLoading = ref(true)
+
+const rows = computed(() => {
+ if (!props.data) {
+ return 5
}
- new EditorView({
+ const lines = props.data.split('\n')
+ console.log({
+ L: lines.length,
+ })
+ return lines.length - 2 > 0 ? lines.length - 2 : 1
+})
+
+const useLangExtensions = async () => {
+ const ext = props.type
+ switch (ext) {
+ case 'js':
+ case 'jsx':
+ case 'ts':
+ case 'tsx':
+ const { javascript } = await import('@codemirror/lang-javascript')
+ return [
+ javascript({
+ jsx: ext.substring(2, 3) === 'x',
+ typescript: ext.substring(0, 2) === 'js'
+ })
+ ]
+ break
+ case 'css':
+ case 'scss':
+ const { sass } = await import('@codemirror/lang-sass')
+ return [sass()]
+ break
+ case 'html':
+ const { html } = await import('@codemirror/lang-html')
+ return [html()]
+ break
+ case 'py':
+ const { python } = await import('@codemirror/lang-python')
+ return [python()]
+ break
+ case 'go':
+ const { go } = await import('@codemirror/lang-go')
+ return [go()]
+ break
+ case 'json':
+ const { json } = await import('@codemirror/lang-json')
+ return [json()]
+ break
+ case 'md':
+ const { markdown } = await import('@codemirror/lang-markdown')
+ return [markdown()]
+ break
+ case 'yaml':
+ const { yaml } = await import('@codemirror/lang-yaml')
+ return [yaml()]
+ break
+ case 'vue':
+ const { vue } = await import('@codemirror/lang-vue')
+ return [vue()]
+ break
+ case 'xml':
+ const { xml } = await import('@codemirror/lang-xml')
+ return [xml()]
+ break
+ default:
+ return []
+ }
+}
+
+let cm: EditorView
+
+onMounted(async () => {
+ const langExtensions = await useLangExtensions()
+ cm = new EditorView({
parent: cmRootRef.value,
doc: props.data,
extensions: [
basicSetup,
EditorState.readOnly.of(true),
+ ...langExtensions
],
})
+ isLoading.value = false
+})
+
+onUpdated(() => {
+ cm.dispatch({
+ changes: {
+ from: 0,
+ to: cm.state.doc.length,
+ insert: props.data,
+ },
+ })
+})
+
+onBeforeUnmount(() => {
+ cm.destroy()
})
-