diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index ad352fe14..d3b51c34d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -93,6 +93,22 @@ export default withTwoslashInlineCache(withMermaid(defineConfig({
       await shiki.loadTheme(...Object.keys(bundledThemes) as any)
     },
     codeTransformers: [
+      {
+        name: 'shiki:fix-shell-angle-placeholders',
+        enforce: 'pre',
+        preprocess(code, options) {
+          const lang = options.lang as string | undefined
+          if (!lang)
+            return
+          if (!/^(?:sh|bash|zsh|shell|shellscript)$/.test(lang))
+            return
+
+          return code.replaceAll(/<[\w-]+>/g, (match) => {
+            const inner = match.slice(1, -1) // remove < and >
+            return `&lt;${inner}&gt;`
+          })
+        },
+      },
       transformerMetaWordHighlight(),
       transformerNotationWordHighlight({
         matchAlgorithm: 'v3',
diff --git a/packages/codegen/test/__snapshots__/basic-precompiled.ts b/packages/codegen/test/__snapshots__/basic-precompiled.ts
index e0a4c6845..76bfd2bd4 100644
--- a/packages/codegen/test/__snapshots__/basic-precompiled.ts
+++ b/packages/codegen/test/__snapshots__/basic-precompiled.ts
@@ -5,7 +5,7 @@ import type {
   HighlighterGeneric,
 } from '@shikijs/types'
 import { createdBundledHighlighter } from '@shikijs/core'
-import { createJavaScriptRawEngine } from '@shikijs/engine-javascript/raw'
+import { createJavaScriptRawEngine } from '@shikijs/engine-javascript'
 
 type BundledLanguage =
   | 'javascript'