feat!: migrate to shiki v1 (#1265)

Author: antfu

cypress/fixtures/basic/package.json

@@ -7,8 +7,8 @@
   },
   "devDependencies": {
     "@slidev/cli": "workspace:*",
-    "@slidev/theme-default": "^0.21.2",
-    "@slidev/theme-seriph": "^0.21.3",
+    "@slidev/theme-default": "^0.24.0",
+    "@slidev/theme-seriph": "^0.24.0",
     "@slidev/types": "workspace:*",
     "nodemon": "^3.0.3"
   }

demo/composable-vue/package.json

@@ -10,8 +10,8 @@
     "@iconify-json/mdi": "^1.1.64",
     "@iconify-json/ri": "^1.1.19",
     "@slidev/cli": "workspace:*",
-    "@slidev/theme-default": "^0.21.2",
-    "@slidev/theme-seriph": "^0.21.3",
+    "@slidev/theme-default": "^0.24.0",
+    "@slidev/theme-seriph": "^0.24.0",
     "@slidev/types": "workspace:*",
     "nodemon": "^3.0.3"
   }

demo/starter/package.json

@@ -8,8 +8,8 @@
   },
   "devDependencies": {
     "@slidev/cli": "workspace:*",
-    "@slidev/theme-default": "^0.21.2",
-    "@slidev/theme-seriph": "^0.21.3",
+    "@slidev/theme-default": "^0.24.0",
+    "@slidev/theme-seriph": "^0.24.0",
     "@slidev/types": "workspace:*",
     "nodemon": "^3.0.3"
   }

demo/starter/slides.md

@@ -2,7 +2,7 @@
 theme: seriph
 background: https://source.unsplash.com/collection/94734566/1920x1080
 class: text-center
-highlighter: shikiji
+highlighter: shiki
 lineNumbers: false
 info: |
   ## Slidev Starter Template
@@ -130,32 +130,20 @@ image: https://source.unsplash.com/collection/94734566/1920x1080
 
 Use code snippets and get the highlighting directly, and even types hover![^1]
 
-```ts {all|5|1-6|9|all} twoslash
-// TwoSlash enables TypeScript hover information and errors in markdown code blocks
-// Learn more at https://www.typescriptlang.org/dev/twoslash/
-function getUser(id: number): User {
-  return undefined as any
-}
-function saveUser(id: number, user: User) {
-  // ...
-}
-// ---cut---
-interface User {
-  id: number
-  firstName: string
-  lastName: string
-  role: string
-// ^?
-}
+```ts {all|5|7|7-8|10|all} twoslash
+// TwoSlash enables TypeScript hover information
+// and errors in markdown code blocks
+// More at https://shiki.style/packages/twoslash
 
-function updateUser(id: number, update: User) {
-  const user = getUser(id)
-  const newUser = { ...user, ...update }
-  saveUser(id, newUser)
-}
+import { computed, ref } from 'vue'
+
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+doubled.value = 2
 ```
 
-<arrow v-click="[3, 4]" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" />
+<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
 
 [^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)
 

package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "version": "0.46.3",
   "private": true,
-  "packageManager": "pnpm@8.14.2",
+  "packageManager": "pnpm@8.15.1",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -26,6 +26,7 @@
     "@antfu/eslint-config": "^2.6.3",
     "@antfu/ni": "^0.21.12",
     "@antfu/utils": "^0.7.7",
+    "@shikijs/markdown-it": "^1.0.0-beta.3",
     "@slidev/cli": "workspace:*",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
@@ -39,7 +40,7 @@
     "@types/katex": "^0.16.7",
     "@types/localtunnel": "^2.0.4",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.5",
+    "@types/node": "^20.11.16",
     "@types/prismjs": "^1.26.3",
     "@types/prompts": "^2.4.9",
     "@types/recordrtc": "^5.6.14",
@@ -53,19 +54,18 @@
     "eslint": "^8.56.0",
     "esno": "^4.0.0",
     "katex": "^0.16.9",
-    "lint-staged": "^15.2.0",
-    "markdown-it-shikiji": "^0.10.0",
-    "mermaid": "^10.7.0",
-    "playwright-chromium": "^1.41.1",
-    "pnpm": "^8.14.2",
+    "lint-staged": "^15.2.1",
+    "mermaid": "^10.8.0",
+    "playwright-chromium": "^1.41.2",
+    "pnpm": "^8.15.1",
     "rimraf": "^5.0.5",
-    "shikiji": "^0.10.0",
+    "shiki": "^1.0.0-beta.3",
     "simple-git-hooks": "^2.9.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vite-plugin-windicss": "^1.9.3",
-    "vitest": "^1.2.1",
+    "vitest": "^1.2.2",
     "vue-tsc": "^1.8.27",
     "zx": "^7.2.3"
   },

packages/client/internals/Play.vue

@@ -48,6 +48,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
       :width="isPrintMode ? windowSize.width.value : undefined"
       :scale="slideScale"
+      :is-main="true"
       @pointerdown="onClick"
     >
       <template #default>

packages/client/internals/SlideContainer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
+import { useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, provide, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
@@ -15,6 +15,10 @@ const props = defineProps({
   scale: {
     type: [Number, String],
   },
+  isMain: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const root = ref<HTMLDivElement>()
@@ -52,6 +56,14 @@ const className = computed(() => ({
   'select-none': !configs.selectable,
 }))
 
+if (props.isMain) {
+  useStyleTag(computed(() => `
+    :root {
+      --slidev-slide-scale: ${scale.value};
+    }
+  `))
+}
+
 provide(injectionSlideScale, scale as any)
 </script>
 

packages/client/package.json

@@ -20,29 +20,30 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.7",
+    "@shikijs/vitepress-twoslash": "^1.0.0-beta.3",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
     "@unhead/vue": "^1.8.10",
-    "@unocss/reset": "^0.58.3",
+    "@unocss/reset": "^0.58.4",
     "@vueuse/core": "^10.7.2",
     "@vueuse/math": "^10.7.2",
     "@vueuse/motion": "^2.0.0",
     "codemirror": "^5.65.5",
     "defu": "^6.1.4",
     "drauu": "^0.3.7",
     "file-saver": "^2.0.5",
-    "floating-vue": "^5.2.0",
+    "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "js-base64": "^3.7.6",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
-    "mermaid": "^10.7.0",
+    "mermaid": "^10.8.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.4",
+    "nanoid": "^5.0.5",
     "prettier": "^3.2.4",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
-    "unocss": "^0.58.3",
+    "unocss": "^0.58.4",
     "vite-plugin-windicss": "^1.9.3",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",

packages/client/setup/main.ts

@@ -3,6 +3,7 @@
 import type { AppContext } from '@slidev/types'
 import { MotionPlugin } from '@vueuse/motion'
 import StarportPlugin from 'vue-starport'
+import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 
 export default function setupMain(context: AppContext) {
   function setMaxHeight() {
@@ -15,6 +16,7 @@ export default function setupMain(context: AppContext) {
 
   context.app.use(MotionPlugin)
   context.app.use(StarportPlugin({ keepAlive: true }))
+  context.app.use(TwoSlashFloatingVue as any)
 
   // @ts-expect-error inject in runtime
   // eslint-disable-next-line unused-imports/no-unused-vars

packages/client/styles/code.css

@@ -3,48 +3,24 @@ html.dark:root {
 }
 
 /* Shiki */
-html.dark .shiki-light {
-  display: none;
-}
-
-html:not(.dark) .shiki-dark {
-  display: none;
-}
-
-.shiki-container {
-  @apply relative flex flex-col;
-}
-
-.shiki-container > .shiki {
-  @apply h-full;
-}
-
-/* Shikiji */
-html.dark .shikiji {
+html.dark .shiki {
   color: var(--shiki-dark, inherit);
-  background: var(--shiki-dark-bg, inherit);
   --twoslash-popup-bg: var(--shiki-dark-bg, inherit);
 }
 
-html.dark .shikiji span {
+html.dark .shiki span {
   color: var(--shiki-dark);
 }
 
-html:not(.dark) .shikiji {
+html:not(.dark) .shiki {
   color: var(--shiki-light, inherit);
-  background: var(--shiki-light-bg, inherit);
   --twoslash-popup-bg: var(--shiki-light-bg, inherit);
 }
 
-html:not(.dark) .shikiji span {
+html:not(.dark) .shiki span {
   color: var(--shiki-light);
 }
 
-.shikiji.twoslash {
-  /* Do not set overflow so the hover popover can be displayed */
-  overflow: inherit;
-}
-
 .twoslash-meta-line.twoslash-popover-line {
   margin-top: -10px;
 }
@@ -64,6 +40,7 @@ html:not(.dark) .shikiji span {
   font-size: var(--slidev-code-font-size) !important;
   line-height: var(--slidev-code-line-height) !important;
   border-radius: var(--slidev-code-radius) !important;
+  background: var(--slidev-code-background);
   overflow: auto;
 }
 
@@ -85,6 +62,18 @@ html:not(.dark) .shikiji span {
   @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
 }
 
+/* Inline Code */
+.slidev-layout :not(pre) > code {
+  font-size: 0.9em;
+  background: var(--slidev-code-background);
+  border-radius: var(--slidev-code-radius);
+  @apply font-light py-0.5 px-1.5;
+}
+
+.slidev-layout :not(pre) > code:before {
+  margin-right: -0.08em;
+}
+
 /* Revert CSS reset for KaTex */
 .katex,
 .katex :after,