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,