@slidev/client 0.45.0 → 0.46.1

package/README.md

@@ -7,4 +7,3 @@ Client code for [Slidev](https://sli.dev). Shipped with [`@slidev/cli`](https://
 ## License
 
 MIT License © 2021 [Anthony Fu](https://github.com/antfu)
-

package/builtin/CodeBlockWrapper.vue

@@ -73,7 +73,7 @@ onMounted(() => {
     const targets = isDuoTone ? Array.from(el.value.querySelectorAll('.shiki')) : [el.value]
     const startLine = props.startLine
     for (const target of targets) {
-      const lines = Array.from(target.querySelectorAll('.line'))
+      const lines = Array.from(target.querySelectorAll('code > .line'))
       const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr.value)
       lines.forEach((line, idx) => {
         const highlighted = highlights.includes(idx + startLine)

package/layouts/image-left.vue

@@ -20,7 +20,7 @@ const style = computed(() => handleBackground(props.image, false, props.backgrou
 
 <template>
   <div class="grid grid-cols-2 w-full h-full auto-rows-fr">
-    <div class="w-full w-full" :style="style" />
+    <div class="w-full h-full" :style="style" />
     <div class="slidev-layout default" :class="props.class">
       <slot />
     </div>

package/layouts/image-right.vue

@@ -23,6 +23,6 @@ const style = computed(() => handleBackground(props.image, false, props.backgrou
     <div class="slidev-layout default" :class="props.class">
       <slot />
     </div>
-    <div class="w-full w-full" :style="style" />
+    <div class="w-full h-full" :style="style" />
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.45.0",
+  "version": "0.46.1",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -19,11 +19,11 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@antfu/utils": "^0.7.6",
-    "@unhead/vue": "^1.8.8",
+    "@antfu/utils": "^0.7.7",
+    "@unhead/vue": "^1.8.9",
     "@unocss/reset": "^0.58.0",
-    "@vueuse/core": "^10.6.1",
-    "@vueuse/math": "^10.6.1",
+    "@vueuse/core": "^10.7.0",
+    "@vueuse/math": "^10.7.0",
     "@vueuse/motion": "^2.0.0",
     "codemirror": "^5.65.5",
     "defu": "^6.1.3",
@@ -36,19 +36,19 @@
     "mermaid": "^10.6.1",
     "monaco-editor": "^0.37.1",
     "nanoid": "^5.0.4",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
     "unocss": "^0.58.0",
     "vite-plugin-windicss": "^1.9.2",
-    "vue": "^3.3.9",
+    "vue": "^3.3.12",
     "vue-router": "^4.2.5",
     "vue-starport": "^0.4.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.45.0",
-    "@slidev/types": "0.45.0"
+    "@slidev/parser": "0.46.1",
+    "@slidev/types": "0.46.1"
   },
   "devDependencies": {
-    "vite": "^5.0.5"
+    "vite": "^5.0.10"
   }
 }

package/styles/code.css

@@ -2,6 +2,7 @@ html.dark:root {
   color-scheme: dark;
 }
 
+/* Shiki */
 html.dark .shiki-light {
   display: none;
 }
@@ -10,6 +11,45 @@ html:not(.dark) .shiki-dark {
   display: none;
 }
 
+.shiki-container {
+  @apply relative flex flex-col;
+}
+
+.shiki-container > .shiki {
+  @apply h-full;
+}
+
+/* Shikiji */
+html.dark .shikiji {
+  color: var(--shiki-dark, inherit);
+  background: var(--shiki-dark-bg, inherit);
+  --twoslash-popup-bg: var(--shiki-dark-bg, inherit);
+}
+
+html.dark .shikiji span {
+  color: var(--shiki-dark);
+}
+
+html:not(.dark) .shikiji {
+  color: var(--shiki-light, inherit);
+  background: var(--shiki-light-bg, inherit);
+  --twoslash-popup-bg: var(--shiki-light-bg, inherit);
+}
+
+html:not(.dark) .shikiji 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;
+}
+
+/* Slidev */
 .slidev-code-wrapper {
   margin: var(--slidev-code-margin) !important;
   scroll-padding: var(--slidev-code-padding);
@@ -31,14 +71,7 @@ html:not(.dark) .shiki-dark {
 }
 .slidev-code .line.dishonored {
   opacity: 0.3;
-}
-
-.shiki-container {
-  @apply relative flex flex-col;
-}
-
-.shiki-container > .shiki {
-  @apply h-full;
+  pointer-events: none;
 }
 
 .slidev-code-line-numbers .slidev-code code {
@@ -52,12 +85,12 @@ html:not(.dark) .shiki-dark {
   @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
 }
 
-/* revert windicss preflight for katex */
+/* Revert CSS reset for KaTex */
 .katex,
 .katex :after,
 .katex :before {
   border-color: currentColor;
 }
 
-/* codemirror */
+/* CodeMirror */
 .CodeMirror pre.CodeMirror-placeholder { opacity: 0.4; }