From 24db30ccecee22a8779486ecb9507cb08187b580 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 26 Feb 2025 15:06:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=8F=E5=B0=91=20hljs=20=E7=9A=84=E4=BD=93?=
 =?UTF-8?q?=E7=A7=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tutorial.vue |  3 ++-
 src/main.ts                 | 20 +++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Tutorial.vue b/src/components/Tutorial.vue
index 5bba9a1..1369a72 100644
--- a/src/components/Tutorial.vue
+++ b/src/components/Tutorial.vue
@@ -57,7 +57,7 @@ function addButton() {
     const match = code.className.match(/-(.*)/)
     let lang = "html"
     if (match) lang = match[1].toLowerCase()
-    copy.innerHTML = `<span class="lang">${lang}</span><div class="btn">替换<div>`
+    copy.innerHTML = `<span class="lang">${lang.toUpperCase()}</span><div class="btn">替换<div>`
     const btn = copy.children[1] as HTMLDivElement
     btn.onclick = () => {
       tab.value = lang
@@ -144,5 +144,6 @@ watch(step, render)
   padding: 1rem;
   cursor: pointer;
   border-radius: 0.4rem;
+  font-size: 1rem;
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index 2d031fe..06156bb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,18 +1,28 @@
 import { createApp } from "vue"
 import { create } from "naive-ui"
-import { marked } from "marked"
+import App from "./App.vue"
+
 //@ts-ignore
 import "normalize.css"
 //@ts-ignore
 import "github-markdown-css/github-markdown-light.css"
-//@ts-ignore
-import "highlight.js/styles/github.min.css"
-import App from "./App.vue"
+
+import { marked } from "marked"
 import markedAlert from "marked-alert"
 import { markedHighlight } from "marked-highlight"
-import hljs from "highlight.js"
 import { alertVariants } from "./utils"
 
+import hljs from "highlight.js/lib/core"
+import xml from "highlight.js/lib/languages/xml"
+import css from "highlight.js/lib/languages/css"
+import javascript from "highlight.js/lib/languages/javascript"
+//@ts-ignore
+import "highlight.js/styles/github.min.css"
+
+hljs.registerLanguage("html", xml)
+hljs.registerLanguage("css", css)
+hljs.registerLanguage("js", javascript)
+
 marked.use({
   gfm: true,
   async: true,