diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 99983b9a3..7382c0e66 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -11,6 +11,7 @@ updates:
     ignore:
       - dependency-name: vue
       - dependency-name: vite
+      - dependency-name: monaco-editor
 
     open-pull-requests-limit: 100
     groups:
diff --git a/.npmrc b/.npmrc
index 7f082f23a..f41f6d2ae 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
-registry=https://registry.npmmirror.com
\ No newline at end of file
+registry=https://registry.npmmirror.com
+ignore-workspace-root-check=true
diff --git a/apps/web/src/components/editor/CssEditor.vue b/apps/web/src/components/editor/CssEditor.vue
index ff4037e08..9ee810fe3 100644
--- a/apps/web/src/components/editor/CssEditor.vue
+++ b/apps/web/src/components/editor/CssEditor.vue
@@ -176,10 +176,9 @@ function tabChanged(tabName: string | number) {
           </TabsTrigger>
         </TabsList>
       </Tabs>
-      <textarea
+      <div
         id="cssEditor"
-        type="textarea"
-        placeholder="Your custom css here."
+        class="flex-1 min-h-0"
       />
 
       <!-- 新增弹窗 -->
diff --git a/apps/web/src/components/editor/CustomUploadForm.vue b/apps/web/src/components/editor/CustomUploadForm.vue
index df48d903f..00bce8ed5 100644
--- a/apps/web/src/components/editor/CustomUploadForm.vue
+++ b/apps/web/src/components/editor/CustomUploadForm.vue
@@ -1,7 +1,9 @@
 <script setup lang='ts'>
-import CodeMirror from 'codemirror'
+import type { MonacoEditor } from '@md/shared'
+import { monaco } from '@md/shared'
 import { useStore } from '@/stores'
 import { removeLeft } from '@/utils'
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
 
 const store = useStore()
 
@@ -18,27 +20,51 @@ const code = useLocalStorage(`formCustomConfig`, removeLeft(`
   })
 `).trim())
 
-const formCustomTextarea = useTemplateRef<HTMLTextAreaElement>(`formCustomTextarea`)
+const editorRef = useTemplateRef<HTMLDivElement>(`editorRef`)
 
-const editor = ref<CodeMirror.EditorFromTextArea | null>(null)
+const editor = ref<MonacoEditor.IStandaloneCodeEditor | null>(null)
 
 onMounted(() => {
-  editor.value = markRaw(CodeMirror.fromTextArea(formCustomTextarea.value!, {
-    mode: `javascript`,
-    theme: store.isDark ? `darcula` : `xq-light`,
-    lineNumbers: true,
-  }))
+  editor.value = monaco.editor.create(editorRef.value!, {
+    value: code.value,
+    language: `javascript`,
+    theme: store.isDark ? `vs-dark` : `vs`,
+    lineNumbers: `on`,
+    automaticLayout: true,
+    fontSize: 12,
+    lineHeight: 18,
+  })
+})
 
-  // 嵌套使用 nextTick 才能确保生效，具体原因未知
-  nextTick(() => {
-    nextTick(() => {
-      editor.value?.setValue(code.value)
+function updateEditorStyle(fontSize: number, lineHeight: number) {
+  if (editor.value) {
+    editor.value.updateOptions({
+      fontSize,
+      lineHeight,
     })
+  }
+}
+
+onMounted(() => {
+  const updateStyle = () => {
+    if (window.innerWidth >= 768) {
+      updateEditorStyle(14, 24)
+    }
+    else {
+      updateEditorStyle(12, 20)
+    }
+  }
+
+  window.addEventListener(`resize`, updateStyle)
+  updateStyle()
+
+  onUnmounted(() => {
+    window.removeEventListener(`resize`, updateStyle)
   })
 })
 
 function formCustomSave() {
-  const str = editor.value!.getValue()
+  const str = toRaw(editor.value!).getValue()
   localStorage.setItem(`formCustomConfig`, str)
   toast.success(`保存成功`)
 }
@@ -46,10 +72,10 @@ function formCustomSave() {
 
 <template>
   <div class="space-y-4 min-w-0">
-    <div class="h-60 border flex flex-col">
-      <textarea
-        ref="formCustomTextarea"
-        placeholder="Your custom code here."
+    <div class="h-60 border flex flex-col rounded-md">
+      <div
+        ref="editorRef"
+        class="flex-1"
       />
     </div>
     <Button
@@ -68,15 +94,4 @@ function formCustomSave() {
 </template>
 
 <style scoped>
-/* 覆盖全局的 overflow-x: hidden 设置 */
-:deep(.CodeMirror-scroll) {
-  overflow-x: auto !important;
-  overflow-y: auto !important;
-}
-
-@media (max-width: 768px) {
-  :deep(.CodeMirror) {
-    font-size: 12px;
-  }
-}
 </style>
diff --git a/apps/web/src/components/editor/RightSlider.vue b/apps/web/src/components/editor/RightSlider.vue
index 3b8906027..dcc1c5386 100644
--- a/apps/web/src/components/editor/RightSlider.vue
+++ b/apps/web/src/components/editor/RightSlider.vue
@@ -36,9 +36,6 @@ const { isDark, primaryColor } = storeToRefs(store)
 
 function customStyle() {
   displayStore.toggleShowCssEditor()
-  setTimeout(() => {
-    store.cssEditor!.refresh()
-  }, 50)
 }
 
 const isOpen = ref(false)
diff --git a/apps/web/src/components/editor/editor-header/StyleDropdown.vue b/apps/web/src/components/editor/editor-header/StyleDropdown.vue
index 9cb504f01..9442482aa 100644
--- a/apps/web/src/components/editor/editor-header/StyleDropdown.vue
+++ b/apps/web/src/components/editor/editor-header/StyleDropdown.vue
@@ -30,7 +30,6 @@ const {
   codeBlockTheme,
   legend,
   isMacCodeBlock,
-  cssEditor,
 } = storeToRefs(store)
 
 const {
@@ -53,9 +52,6 @@ function showPicker() {
 // 自定义CSS样式
 function customStyle() {
   toggleShowCssEditor()
-  setTimeout(() => {
-    cssEditor.value!.refresh()
-  }, 50)
 }
 
 const pickColorsContainer = useTemplateRef(`pickColorsContainer`)
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
index 409771c88..9adc8509e 100644
--- a/apps/web/src/main.ts
+++ b/apps/web/src/main.ts
@@ -3,6 +3,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { setupComponents } from './utils/setup-components'
 
+import './userWorker'
+
 import 'vue-sonner/style.css'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/xq-light.css'
diff --git a/apps/web/src/stores/index.ts b/apps/web/src/stores/index.ts
index 60dfeeb1c..74790fcb8 100644
--- a/apps/web/src/stores/index.ts
+++ b/apps/web/src/stores/index.ts
@@ -1,16 +1,16 @@
+import type { MonacoEditor } from '@md/shared'
+import type CodeMirror from 'codemirror'
 import { initRenderer } from '@md/core'
+import { monaco } from '@md/shared'
 import {
   defaultStyleConfig,
   themeMap,
   widthOptions,
 } from '@md/shared/configs'
-import CodeMirror from 'codemirror'
 import { toPng } from 'html-to-image'
 import { v4 as uuid } from 'uuid'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
-
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt?raw'
-import { altKey, shiftKey } from '@/configs/shortcut-key'
 import {
   addPrefix,
   css2json,
@@ -28,6 +28,7 @@ import {
   sanitizeTitle,
 } from '@/utils'
 import { copyPlain } from '@/utils/clipboard'
+import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
 
 /**********************************
  * Post 结构接口
@@ -280,10 +281,12 @@ export const useStore = defineStore(`store`, () => {
     }
   }
 
-  // 自义定 CSS 编辑器
-  const cssEditor = ref<CodeMirror.EditorFromTextArea | null>(null)
+  // 自义定 CSS 编辑器 (Monaco Editor)
+  const cssEditor = ref<MonacoEditor.IStandaloneCodeEditor | null>(null)
   const setCssEditorValue = (content: string) => {
-    cssEditor.value!.setValue(content)
+    if (cssEditor.value) {
+      toRaw(cssEditor.value).setValue(content)
+    }
   }
   /**
    * 自定义 CSS 内容
@@ -381,7 +384,7 @@ export const useStore = defineStore(`store`, () => {
       isShowLineNumber: isShowLineNumber.value,
     })
 
-    const raw = editor.value!.getValue()
+    const raw = toRaw(editor.value!).getValue()
     const { html: baseHtml, readingTime: readingTimeResult } = renderMarkdown(raw, renderer)
     readingTime.chars = raw.length
     readingTime.words = readingTimeResult.words
@@ -409,7 +412,7 @@ export const useStore = defineStore(`store`, () => {
 
   // 更新 CSS
   const updateCss = () => {
-    const json = css2json(cssEditor.value!.getValue())
+    const json = css2json(toRaw(cssEditor.value!).getValue())
     const newTheme = customCssWithTemplate(
       json,
       primaryColor.value,
@@ -429,47 +432,40 @@ export const useStore = defineStore(`store`, () => {
     const cssEditorDom = document.querySelector<HTMLTextAreaElement>(
       `#cssEditor`,
     )!
-    cssEditorDom.value = getCurrentTab().content
-    const theme = isDark.value ? `darcula` : `xq-light`
-    cssEditor.value = markRaw(
-      CodeMirror.fromTextArea(cssEditorDom, {
-        mode: `css`,
-        theme,
-        lineNumbers: false,
-        lineWrapping: true,
-        styleActiveLine: true,
-        matchBrackets: true,
-        autofocus: true,
-        extraKeys: {
-          [`${shiftKey}-${altKey}-F`]: function autoFormat(
-            editor: CodeMirror.Editor,
-          ) {
-            formatDoc(editor.getValue(), `css`).then((doc) => {
-              getCurrentTab().content = doc
-              editor.setValue(doc)
-            })
-          },
-        },
-      } as never),
-    )
 
-    // 自动提示
-    cssEditor.value.on(`keyup`, (cm, e) => {
-      if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
-        (cm as any).showHint(e)
-      }
+    cssEditor.value = monaco.editor.create(cssEditorDom, {
+      value: getCurrentTab().content,
+      language: `css`,
+      theme: isDark.value ? `vs-dark` : `vs`,
+      lineNumbers: `off`,
+      automaticLayout: true,
+      fontSize: 14,
+      lineHeight: 22,
+      tabSize: 2,
+      minimap: { enabled: false },
     })
 
-    // 实时保存
-    cssEditor.value.on(`update`, () => {
-      updateCss()
-      getCurrentTab().content = cssEditor.value!.getValue()
+    // 格式化
+    cssEditor.value.addCommand(monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF, () => {
+      formatDoc(toRaw(cssEditor.value!).getValue(), `css`).then((doc) => {
+        toRaw(cssEditor.value!).setValue(doc)
+      })
+    })
+
+    // 监听内容变化
+    cssEditor.value.onDidChangeModelContent(() => {
+      if (cssEditor.value) {
+        const content = toRaw(cssEditor.value).getValue()
+        getCurrentTab().content = content
+        updateCss()
+      }
     })
   })
 
   watch(isDark, () => {
-    const theme = isDark.value ? `darcula` : `xq-light`
-    toRaw(cssEditor.value)?.setOption?.(`theme`, theme)
+    if (cssEditor.value) {
+      cssEditor.value.updateOptions({ theme: isDark.value ? `vs-dark` : `vs` })
+    }
   })
 
   // 重置样式
@@ -498,7 +494,9 @@ export const useStore = defineStore(`store`, () => {
       ],
     }
 
-    cssEditor.value!.setValue(DEFAULT_CSS_CONTENT)
+    if (cssEditor.value) {
+      toRaw(cssEditor.value).setValue(DEFAULT_CSS_CONTENT)
+    }
 
     updateCss()
     editorRefresh()
diff --git a/apps/web/src/userWorker.ts b/apps/web/src/userWorker.ts
new file mode 100644
index 000000000..f40c2e336
--- /dev/null
+++ b/apps/web/src/userWorker.ts
@@ -0,0 +1,20 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
+
+// @ts-expect-error
+globalThis.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === `css` || label === `scss` || label === `less`) {
+      return new CssWorker()
+    }
+    if (label === `typescript` || label === `javascript`) {
+      return new TsWorker()
+    }
+    return new EditorWorker()
+  },
+}
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index ac61c5f19..58146c8d9 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -97,6 +97,8 @@ export default defineConfig(({ mode }) => {
                 return `mermaid`
               if (id.includes(`highlight.js`))
                 return `hljs`
+              if (id.includes(`monaco-editor`))
+                return `monaco-editor`
               const pkg = id
                 .split(`node_modules/`)[1]
                 .split(`/`)[0]
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 509b99f03..439ddc5d9 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -13,5 +13,6 @@ export default antfu({
     'no-console': `off`,
     'no-debugger': `off`,
     'ts/no-namespace': `off`,
+    'ts/ban-ts-comment': `off`,
   },
 })
diff --git a/package.json b/package.json
index 4b7bb2293..bab5c1eb6 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,9 @@
     "postinstall": "simple-git-hooks",
     "inspector": "pnpx node-modules-inspector"
   },
+  "dependencies": {
+    "monaco-editor": "0.44.0"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "5.4.1",
     "@types/node": "^24.5.2",
diff --git a/packages/shared/src/editor/index.ts b/packages/shared/src/editor/index.ts
new file mode 100644
index 000000000..9ed861b7b
--- /dev/null
+++ b/packages/shared/src/editor/index.ts
@@ -0,0 +1 @@
+export * from './monaco'
diff --git a/packages/shared/src/editor/monaco.ts b/packages/shared/src/editor/monaco.ts
new file mode 100644
index 000000000..29f3cbf16
--- /dev/null
+++ b/packages/shared/src/editor/monaco.ts
@@ -0,0 +1,5 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import 'monaco-editor/esm/vs/editor/editor.all.js'
+
+export type { editor as MonacoEditor } from 'monaco-editor/esm/vs/editor/editor.api'
+export { monaco }
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 38e24a477..fa9bda959 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -1,4 +1,5 @@
 export * from './configs'
 export * from './constants'
+export * from './editor'
 export * from './types'
 export * from './utils'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0b70f8c5..0c913e3b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      monaco-editor:
+        specifier: 0.44.0
+        version: 0.44.0
     devDependencies:
       '@antfu/eslint-config':
         specifier: 5.4.1
@@ -7271,6 +7275,9 @@ packages:
   mocked-exports@0.1.1:
     resolution: {integrity: sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==}
 
+  monaco-editor@0.44.0:
+    resolution: {integrity: sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -18140,6 +18147,8 @@ snapshots:
 
   mocked-exports@0.1.1: {}
 
+  monaco-editor@0.44.0: {}
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -18495,7 +18504,7 @@ snapshots:
       vue: 3.5.21(typescript@5.9.2)
       vue-bundle-renderer: 2.1.2
       vue-devtools-stub: 0.1.0
-      vue-router: 4.5.1(vue@3.5.21(typescript@5.9.2))
+      vue-router: 4.5.1(vue@3.5.18(typescript@5.9.2))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
       '@types/node': 24.5.2
@@ -20672,7 +20681,7 @@ snapshots:
       unplugin-utils: 0.2.5
       yaml: 2.8.1
     optionalDependencies:
-      vue-router: 4.5.1(vue@3.5.21(typescript@5.9.2))
+      vue-router: 4.5.1(vue@3.5.18(typescript@5.9.2))
     transitivePeerDependencies:
       - typescript
       - vue
@@ -21037,10 +21046,10 @@ snapshots:
       '@popperjs/core': 2.11.8
       vue: 3.5.18(typescript@5.9.2)
 
-  vue-router@4.5.1(vue@3.5.21(typescript@5.9.2)):
+  vue-router@4.5.1(vue@3.5.18(typescript@5.9.2)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.21(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.2)
 
   vue-sonner@2.0.8(@azure/identity@4.12.0)(@parcel/watcher@2.5.1)(@types/node@24.5.2)(@vue/compiler-sfc@3.5.21)(db0@0.3.2)(eslint@9.36.0(jiti@2.5.1))(ioredis@5.7.0)(less@4.4.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.2)(terser@5.43.1)(typescript@5.9.2)(vite@6.3.6(@types/node@24.5.2)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(terser@5.43.1)(yaml@2.8.1))(vue-tsc@3.0.8(typescript@5.9.2))(xml2js@0.6.2)(yaml@2.8.1):
     dependencies: