feat: migrate to shikiji

README.md

@@ -91,7 +91,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 - [`unplugin-vue-macros`](https://github.com/sxzz/unplugin-vue-macros) - Explore and extend more macros and syntax sugar to Vue.
 - [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
 - [`unplugin-vue-markdown`](https://github.com/antfu/unplugin-vue-markdown) - Markdown as components / components in Markdown
-  - [`markdown-it-shiki`](https://github.com/antfu/markdown-it-shiki) - [Shiki](https://github.com/shikijs/shiki) for syntax highlighting
+  - [`markdown-it-shikiji`](https://github.com/antfu/shikiji) - [Shiki](https://github.com/antfu/shikiji) for syntax highlighting
 - [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization
   - [`unplugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n) - unplugin for Vue I18n
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@8.8.0",
+  "packageManager": "pnpm@8.9.0",
   "scripts": {
     "build": "vite-ssg build",
     "dev": "vite --port 3333 --open",
@@ -18,50 +18,50 @@
   },
   "dependencies": {
     "@unhead/vue": "^1.7.4",
-    "@unocss/reset": "^0.56.4",
+    "@unocss/reset": "^0.56.5",
-    "@vueuse/core": "^10.4.1",
+    "@vueuse/core": "^10.5.0",
     "@vueuse/head": "^2.0.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
     "vue-demi": "^0.14.6",
-    "vue-i18n": "^9.4.1",
+    "vue-i18n": "^9.5.0",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^1.0.0-beta.12",
+    "@antfu/eslint-config": "^1.0.0-beta.25",
     "@iconify-json/carbon": "^1.1.21",
-    "@intlify/unplugin-vue-i18n": "^1.2.0",
+    "@intlify/unplugin-vue-i18n": "^1.4.0",
     "@types/markdown-it-link-attributes": "^3.0.2",
     "@types/nprogress": "^0.2.1",
-    "@unocss/eslint-config": "^0.56.4",
+    "@unocss/eslint-config": "^0.56.5",
-    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue": "^4.4.0",
-    "@vue-macros/volar": "^0.15.0",
+    "@vue-macros/volar": "^0.16.1",
     "@vue/test-utils": "^2.4.1",
     "critters": "^0.0.20",
     "cross-env": "^7.0.3",
     "cypress": "^13.3.0",
     "cypress-vite": "^1.4.2",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-plugin-cypress": "^2.15.1",
     "https-localhost": "^4.7.1",
     "lint-staged": "^14.0.1",
     "markdown-it-link-attributes": "^4.0.1",
-    "markdown-it-shiki": "^0.9.0",
+    "markdown-it-shikiji": "^0.6.10",
-    "pnpm": "^8.8.0",
+    "pnpm": "^8.9.0",
     "rollup": "^3.29.3",
-    "shiki": "^0.14.4",
+    "shikiji": "^0.6.10",
     "simple-git-hooks": "^2.9.0",
     "taze": "^0.11.3",
     "typescript": "^5.2.2",
-    "unocss": "^0.56.4",
+    "unocss": "^0.56.5",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.2",
-    "unplugin-vue-macros": "^2.6.0",
+    "unplugin-vue-macros": "^2.6.1",
     "unplugin-vue-markdown": "^0.24.3",
-    "vite": "^4.4.9",
+    "vite": "^4.4.11",
     "vite-bundle-visualizer": "^0.10.0",
-    "vite-plugin-inspect": "^0.7.38",
+    "vite-plugin-inspect": "^0.7.40",
     "vite-plugin-pages": "^0.31.0",
     "vite-plugin-pwa": "^0.16.5",
     "vite-plugin-vue-devtools": "^1.0.0-rc.5",
@@ -69,8 +69,8 @@
     "vite-plugin-webfont-dl": "^3.7.6",
     "vite-ssg": "^0.23.3",
     "vite-ssg-sitemap": "^0.5.1",
-    "vitest": "^0.34.5",
+    "vitest": "^0.34.6",
-    "vue-tsc": "^1.8.15"
+    "vue-tsc": "^1.8.18"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

src/auto-imports.d.ts

@@ -37,6 +37,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDark: typeof import('./composables/dark')['isDark']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
@@ -68,6 +69,7 @@ declare global {
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const preferredDark: typeof import('./composables/dark')['preferredDark']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -329,6 +331,7 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
@@ -360,6 +363,7 @@ declare module 'vue' {
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly preferredDark: UnwrapRef<typeof import('./composables/dark')['preferredDark']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -615,6 +619,7 @@ declare module '@vue/runtime-core' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
@@ -646,6 +651,7 @@ declare module '@vue/runtime-core' {
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly preferredDark: UnwrapRef<typeof import('./composables/dark')['preferredDark']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>

src/styles/markdown.css

@@ -12,17 +12,14 @@
   width: 100%;
 }
 
-.shiki-light {
+.shiki,
-  background: #f8f8f8 !important;
+.shiki span {
-}
+  color: var(--shiki-light);
-.shiki-dark {
+  background: var(--shiki-light-bg);
-  background: #0e0e0e !important;
 }
 
-html.dark .shiki-light {
+html.dark .shiki,
-  display: none;
+html.dark .shiki span {
-}
+  color: var(--shiki-dark);
-
+  background: var(--shiki-dark-bg);
-html:not(.dark) .shiki-dark {
-  display: none;
 }

vite.config.ts

@@ -13,7 +13,7 @@ import { VitePWA } from 'vite-plugin-pwa'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import LinkAttributes from 'markdown-it-link-attributes'
 import Unocss from 'unocss/vite'
-import Shiki from 'markdown-it-shiki'
+import Shiki from 'markdown-it-shikiji'
 import WebfontDownload from 'vite-plugin-webfont-dl'
 
 export default defineConfig({
@@ -75,14 +75,7 @@ export default defineConfig({
     Markdown({
       wrapperClasses: 'prose prose-sm m-auto text-left',
       headEnabled: true,
-      markdownItSetup(md) {
+      async markdownItSetup(md) {
-        // https://prismjs.com/
-        md.use(Shiki, {
-          theme: {
-            light: 'vitesse-light',
-            dark: 'vitesse-dark',
-          },
-        })
         md.use(LinkAttributes, {
           matcher: (link: string) => /^https?:\/\//.test(link),
           attrs: {
@@ -90,6 +83,13 @@ export default defineConfig({
             rel: 'noopener',
           },
         })
+        md.use(await Shiki({
+          defaultColor: false,
+          themes: {
+            light: 'vitesse-light',
+            dark: 'vitesse-dark',
+          },
+        }))
       },
     }),