feat: replace CodeMirror in side editor with Shiki-based textarea

[kermanx]

A breaking change because old custom styles may no longer work.

Pros

• Reduce bundle size
• Highlighting is more accurate
• No CJS problems introduced by CodeMirror
• Load faster
• Easier to maintain

Cons

• Undo/redo functionality becomes weak
• I have to use word-break: break-all, otherwise the text inside <pre shiki> and <textarea> will be mismatched, because <span>s in <pre shiki> affects the word breaking.

Why not use monaco-editor

• If monaco-editor is used in the side editor, it has to be loaded in dev, even the user doesn't use {monaco-*} features
• Kind of too complex. Most of the features aren't useful in the side editor.

Resolve #1391.

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	5f87147
🔍 Latest deploy log	https://app.netlify.com/sites/slidev/deploys/667993280e72b90008470f5f
😎 Deploy Preview	https://deploy-preview-1698--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kermanx]

Moved here from:

slidev/packages/client/setup/code-runners.ts

Lines 20 to 28 in 4707949

	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,
	})

It now uses Shiki's dual theme feature. I am not sure why it wasn't used.