diff --git a/docs/guide/editors.md b/docs/guide/editors.md
index 137eb0894b..cee5060973 100644
--- a/docs/guide/editors.md
+++ b/docs/guide/editors.md
@@ -6,7 +6,7 @@ If you want some high-level management to your slides, we have provided the foll
 
 ## Integrated Editor
 
-Slidev comes with an integrated [CodeMirror](https://codemirror.net/) editor that will instantly reload and save the changes to your file.
+Slidev comes with an integrated editor that will instantly reload and save the changes to your file.
 
 Click the <carbon-edit class="inline-icon-btn"/> button to open it.
 
diff --git a/package.json b/package.json
index 2c9e6a5276..a18de61f1f 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
     "@types/cli-progress": "^3.11.5",
-    "@types/codemirror": "^5.60.15",
     "@types/connect": "^3.4.38",
     "@types/debug": "^4.1.12",
     "@types/file-saver": "^2.0.7",
diff --git a/packages/client/internals/ShikiEditor.vue b/packages/client/internals/ShikiEditor.vue
new file mode 100644
index 0000000000..fa2779434e
--- /dev/null
+++ b/packages/client/internals/ShikiEditor.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { getHighlighter } from '#slidev/shiki'
+
+const props = defineProps<{
+  placeholder?: string
+}>()
+const content = defineModel<string>({ required: true })
+
+const textareaEl = ref<HTMLTextAreaElement | null>(null)
+
+const html = ref('')
+
+watchEffect((onCleanup) => {
+  let canceled = false
+  onCleanup(() => canceled = true)
+
+  const c = content.value
+  async function updateHtml() {
+    const highlight = await getHighlighter()
+    if (canceled)
+      return
+    const h = await highlight(c, 'markdown')
+    if (canceled)
+      return
+    html.value = h
+  }
+  updateHtml()
+})
+</script>
+
+<template>
+  <div class="absolute inset-x-3 inset-y-2 font-mono overflow-x-hidden overflow-y-auto">
+    <div class="relative w-full h-max">
+      <div class="relative w-full h-max" v-html="html" />
+      <textarea
+        ref="textareaEl" v-model="content" :placeholder="props.placeholder"
+        class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-white overflow-y-hidden"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(code),
+textarea {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-size: 1em;
+  text-wrap: wrap;
+  word-break: break-all;
+  display: block;
+  width: 100%;
+}
+:deep(pre.shiki) {
+  background-color: transparent;
+}
+</style>
diff --git a/packages/client/internals/SideEditor.vue b/packages/client/internals/SideEditor.vue
index 0715079c55..de90e0122a 100644
--- a/packages/client/internals/SideEditor.vue
+++ b/packages/client/internals/SideEditor.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { throttledWatch, useEventListener, watchThrottled } from '@vueuse/core'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { activeElement, editorHeight, editorWidth, isEditorVertical, isInputting, showEditor, isEditorVertical as vertical } from '../state'
-import { useCodeMirror } from '../modules/codemirror'
+import { throttledWatch, useEventListener } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import { useNav } from '../composables/useNav'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import IconButton from './IconButton.vue'
+import ShikiEditor from './ShikiEditor.vue'
 
 const props = defineProps<{
   resize?: boolean
@@ -18,8 +18,6 @@ const content = ref('')
 const note = ref('')
 const dirty = ref(false)
 const frontmatter = ref<any>({})
-const contentInput = ref<HTMLTextAreaElement>()
-const noteInput = ref<HTMLTextAreaElement>()
 
 const { info, update } = useDynamicSlideInfo(currentSlideNo)
 
@@ -57,65 +55,22 @@ useEventListener('keydown', (e) => {
   }
 })
 
-onMounted(async () => {
-  const contentEditor = await useCodeMirror(
-    contentInput,
-    computed({
-      get() { return content.value },
-      set(v) {
-        if (content.value.trim() !== v.trim()) {
-          content.value = v
-          dirty.value = true
-        }
-      },
-    }),
-    {
-      mode: 'markdown',
-      lineWrapping: true,
-      // @ts-expect-error missing types
-      highlightFormatting: true,
-      fencedCodeBlockDefaultMode: 'javascript',
-    },
-  )
-
-  const noteEditor = await useCodeMirror(
-    noteInput,
-    computed({
-      get() { return note.value },
-      set(v) {
-        note.value = v
-        dirty.value = true
-      },
-    }),
-    {
-      mode: 'markdown',
-      lineWrapping: true,
-      // @ts-expect-error missing types
-      highlightFormatting: true,
-      fencedCodeBlockDefaultMode: 'javascript',
-    },
-  )
-
-  watchThrottled(
-    [tab, vertical, isEditorVertical, editorWidth, editorHeight],
-    () => {
-      nextTick(() => {
-        if (tab.value === 'content')
-          contentEditor.refresh()
-        else
-          noteEditor.refresh()
-      })
-    },
-    {
-      throttle: 100,
-      flush: 'post',
-    },
-  )
+const contentRef = computed({
+  get() { return content.value },
+  set(v) {
+    if (content.value.trim() !== v.trim()) {
+      content.value = v
+      dirty.value = true
+    }
+  },
+})
 
-  watch(currentSlideNo, () => {
-    contentEditor.clearHistory()
-    noteEditor.clearHistory()
-  }, { flush: 'post' })
+const noteRef = computed({
+  get() { return note.value },
+  set(v) {
+    note.value = v
+    dirty.value = true
+  },
 })
 
 const handlerDown = ref(false)
@@ -212,19 +167,9 @@ throttledWatch(
         <carbon:close />
       </IconButton>
     </div>
-    <div class="overflow-hidden">
-      <div v-show="tab === 'content'" class="w-full h-full">
-        <textarea ref="contentInput" placeholder="Create slide content..." />
-      </div>
-      <div v-show="tab === 'note'" class="w-full h-full">
-        <textarea ref="noteInput" placeholder="Write some notes..." />
-      </div>
+    <div class="relative overflow-hidden rounded" style="background-color: var(--slidev-code-background)">
+      <ShikiEditor v-show="tab === 'content'" v-model="contentRef" placeholder="Create slide content..." />
+      <ShikiEditor v-show="tab === 'note'" v-model="noteRef" placeholder="Write some notes..." />
     </div>
   </div>
 </template>
-
-<style lang="postcss">
-.CodeMirror {
-  @apply px-3 py-2 h-full overflow-hidden bg-transparent font-mono text-sm z-0;
-}
-</style>
diff --git a/packages/client/modules/codemirror.ts b/packages/client/modules/codemirror.ts
deleted file mode 100644
index 67144c0b7f..0000000000
--- a/packages/client/modules/codemirror.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Ref, WritableComputedRef } from 'vue'
-import { onClickOutside } from '@vueuse/core'
-import { watch } from 'vue'
-import CodeMirror from 'codemirror'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/css/css'
-import 'codemirror/mode/markdown/markdown'
-import 'codemirror/mode/xml/xml'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/addon/display/placeholder'
-import 'codemirror/lib/codemirror.css'
-
-export async function useCodeMirror(
-  textarea: Ref<HTMLTextAreaElement | null | undefined>,
-  input: Ref<string> | WritableComputedRef<string>,
-  options: CodeMirror.EditorConfiguration = {},
-) {
-  const cm = CodeMirror.fromTextArea(
-    textarea.value!,
-    {
-      theme: 'vars',
-      ...options,
-    },
-  )
-
-  let skip = false
-
-  cm.on('change', () => {
-    if (skip) {
-      skip = false
-      return
-    }
-    input.value = cm.getValue()
-  })
-
-  watch(
-    input,
-    (v) => {
-      if (v !== cm.getValue()) {
-        skip = true
-        const selections = cm.listSelections()
-        cm.replaceRange(v, cm.posFromIndex(0), cm.posFromIndex(Number.POSITIVE_INFINITY))
-        cm.setSelections(selections)
-      }
-    },
-    { immediate: true },
-  )
-
-  onClickOutside(cm.getWrapperElement(), () => {
-    const el = cm.getInputField()
-    if (document.activeElement === el)
-      el.blur()
-  })
-
-  return cm
-}
diff --git a/packages/client/package.json b/packages/client/package.json
index 7c1e7bd277..28738254ee 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -43,7 +43,6 @@
     "@vueuse/core": "^10.10.0",
     "@vueuse/math": "^10.10.0",
     "@vueuse/motion": "^2.2.3",
-    "codemirror": "^5.65.16",
     "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
diff --git a/packages/client/setup/code-runners.ts b/packages/client/setup/code-runners.ts
index fe92a57e6a..130d2b96ca 100644
--- a/packages/client/setup/code-runners.ts
+++ b/packages/client/setup/code-runners.ts
@@ -1,9 +1,8 @@
 import { createSingletonPromise } from '@antfu/utils'
 import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
-import type { CodeToHastOptions } from 'shiki'
+
 import type ts from 'typescript'
 import { ref } from 'vue'
-import { isDark } from '../logic/dark'
 import deps from '#slidev/monaco-run-deps'
 import setups from '#slidev/setups/code-runners'
 
@@ -15,17 +14,8 @@ export default createSingletonPromise(async () => {
     ts: runTypeScript,
   }
 
-  const { shiki, themes } = await import('#slidev/shiki')
-  const highlighter = await shiki
-  const highlight = (code: string, lang: string, options: Partial<CodeToHastOptions> = {}) => highlighter.codeToHtml(code, {
-    lang,
-    theme: typeof themes === 'string'
-      ? themes
-      : isDark.value
-        ? themes.dark || 'vitesse-dark'
-        : themes.light || 'vitesse-light',
-    ...options,
-  })
+  const { getHighlighter } = await import('#slidev/shiki')
+  const highlight = await getHighlighter()
 
   const run = async (code: string, lang: string, options: Record<string, unknown>): Promise<CodeRunnerOutputs> => {
     try {
diff --git a/packages/client/state/index.ts b/packages/client/state/index.ts
index 801f4c5d14..bf844fdcc0 100644
--- a/packages/client/state/index.ts
+++ b/packages/client/state/index.ts
@@ -19,7 +19,7 @@ export const isScreenVertical = computed(() => windowSize.height.value - windowS
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()
-export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
+export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
 export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
 
 export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
diff --git a/packages/client/styles/code.css b/packages/client/styles/code.css
index e0e9ae5aa1..31e1c39a14 100644
--- a/packages/client/styles/code.css
+++ b/packages/client/styles/code.css
@@ -5,6 +5,7 @@ html.dark:root {
 /* Shiki */
 html.dark .shiki {
   color: var(--shiki-dark, inherit);
+  background: var(--shiki-dark-bg, inherit);
   --twoslash-popup-bg: var(--shiki-dark-bg, inherit);
 }
 
@@ -82,8 +83,3 @@ html:not(.dark) .shiki span {
 .katex :before {
   border-color: currentColor;
 }
-
-/* CodeMirror */
-.CodeMirror pre.CodeMirror-placeholder {
-  opacity: 0.4;
-}
diff --git a/packages/create-theme/template/package.json b/packages/create-theme/template/package.json
index 144dc88018..51832c19bf 100644
--- a/packages/create-theme/template/package.json
+++ b/packages/create-theme/template/package.json
@@ -16,7 +16,6 @@
   },
   "dependencies": {
     "@slidev/types": "^0.49.11",
-    "codemirror-theme-vars": "^0.1.2",
     "prism-theme-vars": "^0.2.5"
   },
   "devDependencies": {
diff --git a/packages/create-theme/template/styles/prism.css b/packages/create-theme/template/styles/prism.css
index 34fcf72fa3..49d6156787 100644
--- a/packages/create-theme/template/styles/prism.css
+++ b/packages/create-theme/template/styles/prism.css
@@ -1,6 +1,4 @@
 @import 'prism-theme-vars/base.css';
-@import 'codemirror-theme-vars/base.css';
-@import 'prism-theme-vars/to-codemirror.css';
 
 :root {
   --prism-font-family: var(--slidev-code-font-family);
diff --git a/packages/slidev/node/virtual/shiki.ts b/packages/slidev/node/virtual/shiki.ts
index 1725221f38..1eb8b56f22 100644
--- a/packages/slidev/node/virtual/shiki.ts
+++ b/packages/slidev/node/virtual/shiki.ts
@@ -7,7 +7,7 @@ export const templateShiki: VirtualModuleTemplate = {
   id: '/@slidev/shiki',
   getContent: async ({ clientRoot, roots }) => {
     const options = await loadShikiSetups(clientRoot, roots)
-    const langs = await resolveLangs(options.langs || ['javascript', 'typescript', 'html', 'css'])
+    const langs = await resolveLangs(options.langs || ['markdown', 'vue', 'javascript', 'typescript', 'html', 'css'])
     const resolvedThemeOptions = 'themes' in options
       ? {
           themes: Object.fromEntries(await Promise.all(Object.entries(options.themes)
@@ -70,6 +70,20 @@ export const templateShiki: VirtualModuleTemplate = {
       `  langs: [${langsInit.join(',')}],`,
       `  loadWasm: import('${await resolveImportUrl('shiki/wasm')}'),`,
       '})',
+
+      'let highlight',
+      'export async function getHighlighter() {',
+      '  if (highlight) return highlight',
+      '  const highlighter = await shiki',
+      '  highlight = (code, lang, options) => highlighter.codeToHtml(code, {',
+      '    lang,',
+      `    theme: ${JSON.stringify(themeOptionsNames.theme)},`,
+      `    themes: ${JSON.stringify(themeOptionsNames.themes)},`,
+      '    defaultColor: false,',
+      '    ...options,',
+      '  })',
+      '  return highlight',
+      '}',
     )
 
     return lines.join('\n')
diff --git a/packages/slidev/node/vite/extendConfig.ts b/packages/slidev/node/vite/extendConfig.ts
index 999a1f50fc..fb26d0820e 100644
--- a/packages/slidev/node/vite/extendConfig.ts
+++ b/packages/slidev/node/vite/extendConfig.ts
@@ -18,17 +18,7 @@ const INCLUDE_GLOBAL = [
   'yaml',
 ]
 
-const INCLUDE_LOCAL = [
-  ...INCLUDE_GLOBAL,
-
-  'codemirror',
-  'codemirror/mode/javascript/javascript',
-  'codemirror/mode/css/css',
-  'codemirror/mode/markdown/markdown',
-  'codemirror/mode/xml/xml',
-  'codemirror/mode/htmlmixed/htmlmixed',
-  'codemirror/addon/display/placeholder',
-].map(i => `@slidev/cli > @slidev/client > ${i}`)
+const INCLUDE_LOCAL = INCLUDE_GLOBAL.map(i => `@slidev/cli > @slidev/client > ${i}`)
 
 // @keep-sorted
 const EXCLUDE_GLOBAL = [
diff --git a/packages/slidev/package.json b/packages/slidev/package.json
index 507bb349bf..c967b5fdeb 100644
--- a/packages/slidev/package.json
+++ b/packages/slidev/package.json
@@ -66,7 +66,6 @@
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "chokidar": "^3.6.0",
     "cli-progress": "^3.12.0",
-    "codemirror": "^5.65.16",
     "connect": "^3.7.0",
     "debug": "^4.3.5",
     "fast-deep-equal": "^3.1.3",
diff --git a/packages/types/client.d.ts b/packages/types/client.d.ts
index 8dd13d5e7f..73def4587d 100644
--- a/packages/types/client.d.ts
+++ b/packages/types/client.d.ts
@@ -42,13 +42,14 @@ declare module '#slidev/custom-nav-controls' {
 
 declare module '#slidev/shiki' {
   import type { ShikiHighlighterCore } from 'shiki/core'
-  import type { BundledLanguage, BundledTheme } from 'shiki'
+  import type { BundledLanguage, BundledTheme, CodeToHastOptions } from 'shiki'
 
   export { shikiToMonaco } from '@shikijs/monaco'
 
   export const langs: BundledLanguage[]
   export const themes: BundledTheme | Record<string, BundledTheme>
   export const shiki: Promise<ShikiHighlighterCore>
+  export function getHighlighter(): Promise<(code: string, lang: string, options?: Partial<CodeToHastOptions>) => Promise<string>>
 }
 
 declare module '#slidev/setups/monaco' {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d883af59f8..da4ee37c7a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,9 +37,6 @@ importers:
       '@types/cli-progress':
         specifier: ^3.11.5
         version: 3.11.5
-      '@types/codemirror':
-        specifier: ^5.60.15
-        version: 5.60.15
       '@types/connect':
         specifier: ^3.4.38
         version: 3.4.38
@@ -350,9 +347,6 @@ importers:
       '@vueuse/motion':
         specifier: ^2.2.3
         version: 2.2.3(rollup@4.13.2)(vue@3.4.27(typescript@5.4.5))
-      codemirror:
-        specifier: ^5.65.16
-        version: 5.65.16
       drauu:
         specifier: ^0.4.0
         version: 0.4.0
@@ -504,9 +498,6 @@ importers:
       cli-progress:
         specifier: ^3.12.0
         version: 3.12.0
-      codemirror:
-        specifier: ^5.65.16
-        version: 5.65.16
       connect:
         specifier: ^3.7.0
         version: 3.7.0
@@ -1948,9 +1939,6 @@ packages:
   '@types/cli-progress@3.11.5':
     resolution: {integrity: sha512-D4PbNRbviKyppS5ivBGyFO29POlySLmA2HyUFE4p5QGazAMM3CwkKWcvTl8gvElSuxRh6FPKL8XmidX873ou4g==}
 
-  '@types/codemirror@5.60.15':
-    resolution: {integrity: sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==}
-
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -2053,9 +2041,6 @@ packages:
   '@types/sizzle@2.3.8':
     resolution: {integrity: sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==}
 
-  '@types/tern@0.23.9':
-    resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
-
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
@@ -7844,10 +7829,6 @@ snapshots:
     dependencies:
       '@types/node': 20.13.0
 
-  '@types/codemirror@5.60.15':
-    dependencies:
-      '@types/tern': 0.23.9
-
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 20.13.0
@@ -7952,10 +7933,6 @@ snapshots:
 
   '@types/sizzle@2.3.8': {}
 
-  '@types/tern@0.23.9':
-    dependencies:
-      '@types/estree': 1.0.5
-
   '@types/unist@2.0.10': {}
 
   '@types/unist@3.0.2': {}
diff --git a/taze.config.ts b/taze.config.ts
index f8748fb7a7..b648ed317c 100644
--- a/taze.config.ts
+++ b/taze.config.ts
@@ -2,7 +2,6 @@ import { defineConfig } from 'taze'
 
 export default defineConfig({
   packageMode: {
-    codemirror: 'minor',
     // v9 drops v18.0, we keep using v8 until we bump the deps
     execa: 'minor',
     // See #1537