代码高亮

src/components/Editor.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { EditorView } from "@codemirror/view"
 import { Codemirror } from "vue-codemirror"
-import { smoothy } from "../themes/smoothy.ts"
+import { githubLight } from "@fsegurai/codemirror-theme-github-light"
 import { css } from "@codemirror/lang-css"
 import { javascript } from "@codemirror/lang-javascript"
 import { html } from "@codemirror/lang-html"
@@ -45,7 +45,7 @@ const lang = computed(() => {
   <Codemirror
     v-model="code"
     indentWithTab
-    :extensions="[styleTheme, lang, smoothy]"
+    :extensions="[styleTheme, lang, githubLight]"
     :tabSize="4"
     :style="{ height: '100%', fontSize: props.fontSize + 'px' }"
   />

src/components/Editors.vue

@@ -2,7 +2,6 @@
   <n-tabs
     style="height: 100%"
     pane-class="pane"
-    size="large"
     :default-value="currentTab"
     type="segment"
     @update:value="changeTab"
@@ -41,7 +40,7 @@
           <span>选项</span>
         </n-flex>
       </template>
-      <n-flex size="large" vertical class="wrapper">
+      <n-flex vertical class="wrapper">
         <n-flex align="center">
           <span class="label">重置</span>
           <n-button @click="reset('html')">HTML</n-button>

src/components/Preview.vue

@@ -46,7 +46,7 @@ onMounted(preview)
 </script>
 <style scoped>
 .title {
-  height: 46px;
+  height: 40px;
   background-color: rgb(247, 247, 250);
   padding: 0 20px;
 }

src/components/Tutorial.vue

@@ -12,22 +12,27 @@
         </n-button>
       </n-flex>
     </n-flex>
-    <div class="markdown-body" v-html="marked(content)"></div>
+    <div class="markdown-body" v-html="markdownContent"></div>
   </div>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
 import { step, prev, next, content } from "../store"
-import { onMounted, ref, watch } from "vue"
+import { onMounted, ref, shallowRef, watch } from "vue"
 import { marked } from "marked"
+import { markedHighlight } from "marked-highlight"
+import hljs from "highlight.js"
 
 const end = ref(false)
+const markdownContent = shallowRef("")
 
 async function getContent() {
   const res = await fetch(`/turtorial/${step.value}/README.md`)
   const data = await res.text()
   if (!!data) {
     content.value = data
+    const html = await marked.parse(content.value, { async: true })
+    markdownContent.value = html
     end.value = false
   } else {
     end.value = true
@@ -35,7 +40,22 @@ async function getContent() {
   }
 }
 
-onMounted(getContent)
+onMounted(() => {
+  getContent()
+  marked.use({
+    gfm: true,
+    async: true,
+  })
+  marked.use(
+    markedHighlight({
+      langPrefix: "hljs language-",
+      highlight(code, lang) {
+        const language = hljs.getLanguage(lang) ? lang : "plaintext"
+        return hljs.highlight(code, { language }).value
+      },
+    }),
+  )
+})
 watch(step, getContent)
 </script>
 <style scoped>
@@ -45,7 +65,7 @@ watch(step, getContent)
   height: 100%;
 }
 .title {
-  height: 46px;
+  height: 40px;
   background-color: rgb(247, 247, 250);
   padding: 0 20px;
   flex-shrink: 0;