feat: support shikiji highlighter and twoslash integration (#1218)

Author: antfu

.vscode/settings.json

@@ -17,7 +17,7 @@
   // Auto fix
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
-    "source.organizeImports": false
+    "source.organizeImports": "never"
   },
 
   // Silent the stylistic rules in you IDE, but still auto fix them

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 Excited to hear that you are interested in contributing to this project! Thanks!
 
-## Documentations 
+## Documentations
 
 Documentations are now moved to [`slidevjs/docs`](https://github.com/slidevjs/docs) repo.
 
@@ -20,13 +20,13 @@ This project uses [`pnpm`](https://pnpm.io/) to manage the dependencies, install
 npm i -g pnpm
 ```
 
-Clone this repo to your local machine and install the dependencies. 
+Clone this repo to your local machine and install the dependencies.
 
 ```bash
 pnpm install
 ```
 
-## Development 
+## Development
 
 To build all the packages at once, run the following command on the project root
 

cypress/fixtures/basic/slides.md

@@ -55,7 +55,6 @@ Current Page: {{$slidev.nav.currentPage}}
 
 </v-clicks>
 
-
 <v-clicks>
 
 1. C

demo/composable-vue/package.json

@@ -7,8 +7,8 @@
     "export:clicks": "slidev export --with-clicks"
   },
   "devDependencies": {
-    "@iconify-json/mdi": "^1.1.58",
-    "@iconify-json/ri": "^1.1.15",
+    "@iconify-json/mdi": "^1.1.62",
+    "@iconify-json/ri": "^1.1.17",
     "@slidev/cli": "workspace:*",
     "@slidev/theme-default": "^0.21.2",
     "@slidev/theme-seriph": "^0.21.3",

demo/composable-vue/slides.md

@@ -31,7 +31,6 @@ Anthony Fu
   </div>
 </div>
 
-
 ---
 layout: 'intro'
 ---
@@ -55,7 +54,6 @@ A fanatical full-time open sourceror.<br>
 
 <img src="https://antfu.me/avatar.png" class="rounded-full w-40 abs-tr mt-16 mr-12" alt="A comic art image of Anthony Fu"/>
 
-
 ---
 name: Sponsors
 layout: center
@@ -74,7 +72,6 @@ layout: center
 
 # Composable Vue
 
-
 ---
 name: VueUse
 layout: center
@@ -106,7 +103,6 @@ layout: center
   </div>
 </div>
 
-
 ---
 layout: center
 class: text-center
@@ -116,7 +112,6 @@ class: text-center
 
 a brief go-through
 
-
 ---
 
 <div class="grid grid-cols-2 gap-x-4"><div>
@@ -175,7 +170,6 @@ bar.prop = 1
 </div>
 </div></div>
 
-
 ---
 
 # Ref Auto Unwrapping <MarkerCore />
@@ -224,7 +218,6 @@ data.foo // 'bar'
 
 </div>
 
-
 ---
 
 # `unref` - Opposite of Ref <MarkerCore />
@@ -260,7 +253,6 @@ unref(bar) // 'bar'
 
 </div></div>
 
-
 ---
 layout: center
 class: text-center
@@ -270,7 +262,6 @@ class: text-center
 
 of writing composable functions
 
-
 ---
 
 # What's Composable Functions
@@ -309,7 +300,6 @@ export function useDark(options: UseDarkOptions = {}) {
 <VueUse name="useDark"/>
 </div>
 
-
 ---
 
 # Think as "Connections"
@@ -327,7 +317,6 @@ The `setup()` only runs **once** on component initialization, to construct the r
   </div>
 </div>
 
-
 ---
 
 # One Thing at a Time
@@ -340,7 +329,6 @@ Just the same as authoring JavaScript functions.
 - Keep function small and simple
 - "Do one thing, and do it well"
 
-
 ---
 
 # Passing Refs as Arguments <MarkerPattern />
@@ -359,7 +347,6 @@ Just the same as authoring JavaScript functions.
 Plain function
 </div>
 
-
 ```ts
 function add(a: number, b: number) {
   return a + b
@@ -416,7 +403,6 @@ c.value // 6
 
 </div>
 
-
 ---
 
 # MaybeRef <MarkerTips/>
@@ -431,7 +417,6 @@ type MaybeRef<T> = Ref<T> | T
 
 In VueUse, we use this helper heavily to support optional reactive arguments
 
-
 ```ts
 export function useTimeAgo(
   time: Date | number | string | Ref<Date | number | string>,
@@ -455,7 +440,6 @@ export function useTimeAgo(
 
 </v-click>
 
-
 ---
 
 # Make it Flexible <MarkerPattern />
@@ -501,7 +485,6 @@ name.value = 'Hi' // Hi - World
 <VueUse name="useTitle"/>
 </div>
 
-
 ---
 
 # `useTitle` <Marker class="text-blue-400">Case</Marker>
@@ -531,11 +514,6 @@ export function useTitle(
 
 ```html
 
-
-
-
-
-
 <-- 1. use the user provided ref or create a new one
 
 <-- 2. sync ref changes to the document title
@@ -545,7 +523,6 @@ export function useTitle(
 </v-clicks>
 </div>
 
-
 ---
 
 # "Reuse" Ref <MarkerCore />
@@ -561,7 +538,6 @@ const bar = ref(foo) // Ref<1>
 foo === bar // true
 ```
 
-
 ```ts
 function useFoo(foo: Ref<string> | string) {
   // no need!
@@ -578,7 +554,6 @@ Extremely useful in composable functions that take uncertain argument types.
 
 </v-clicks>
 
-
 ---
 
 # `ref` / `unref` <MarkerTips />
@@ -602,7 +577,6 @@ function useBala<T>(arg: MaybeRef<T>) {
 
 </div>
 
-
 ---
 
 # Object of Refs <MarkerPattern />
@@ -639,7 +613,6 @@ mouse.x === x.value // true
 </v-clicks>
 </div>
 
-
 ---
 
 # Async to "Sync" <MarkerTips />
@@ -674,7 +647,6 @@ Establish the "Connections" first, then wait for data to be filled up. The idea
 
 </div>
 
-
 ---
 
 # `useFetch` <Marker class="text-blue-400">Case</Marker>
@@ -704,7 +676,6 @@ export function useFetch<R>(url: MaybeRef<string>) {
 <VueUse name="useFetch"/>
 </div>
 
-
 ---
 
 # Side-effects Self Cleanup <MarkerPattern />
@@ -758,7 +729,6 @@ const scope = effectScope(() => {
 stop(scope)
 ```
 
-
 ---
 disabled: true
 ---
@@ -793,7 +763,6 @@ export default defineComponent({
 
 </div>
 
-
 ---
 disabled: true
 ---
@@ -827,7 +796,6 @@ export default defineComponent({
 </v-click>
 </div>
 
-
 ---
 
 # Typed Provide / Inject <MarkerCore/>
@@ -850,7 +818,6 @@ export const injectKeyUser: InjectionKey<UserInfo> = Symbol('user')
 
 </div>
 
-
 ---
 
 # Typed Provide / Inject <MarkerCore/>
@@ -894,7 +861,6 @@ export default {
 </v-clicks>
 </div>
 
-
 ---
 
 # Shared State <MarkerPattern />
@@ -940,7 +906,6 @@ console.log(state.foo) // 2
 
 <h3 v-click class="opacity-100">⚠️ But it's not SSR compatible!</h3>
 
-
 ---
 
 # Shared State (SSR friendly) <MarkerPattern />
@@ -1001,7 +966,6 @@ const state = useMyState()
 
 </div>
 
-
 ---
 
 # useVModel <MarkerTips />
@@ -1061,7 +1025,6 @@ export default defineComponent({
 <VueUse name="useVModel"/>
 </div>
 
-
 ---
 disabled: true
 ---
@@ -1093,14 +1056,12 @@ export function usePassiveVModel(props, name) {
 
 </v-click>
 
-
 ---
 layout: center
 ---
 
 # All of them work for both Vue 2 and 3
 
-
 ---
 
 # `@vue/composition-api` <Marker class="text-teal-400">Lib</Marker>
@@ -1118,7 +1079,6 @@ Vue.use(VueCompositionAPI)
 import { reactive, ref } from '@vue/composition-api'
 ```
 
-
 ---
 
 # Vue 2.7 <Marker class="text-purple-400">Upcoming</Marker>
@@ -1131,7 +1091,6 @@ import { reactive, ref } from '@vue/composition-api'
 - IE11 support.
 - LTS.
 
-
 ---
 
 # Vue Demi <Marker class="text-teal-400">Lib</Marker>
@@ -1145,7 +1104,6 @@ import { defineComponent, reactive, ref } from 'vue-demi'
 
 <img class="h-50 mx-auto" src="https://cdn.jsdelivr.net/gh/vueuse/vue-demi/assets/banner.png" alt="" />
 
-
 ---
 
 # Recap
@@ -1159,7 +1117,6 @@ import { defineComponent, reactive, ref } from 'vue-demi'
 - Side-effect self clean up
 - Shared state
 
-
 ---
 layout: center
 class: 'text-center pb-5 :'