refactor: migrate from shikiji to shiki v1 (#2591)

README.md

@@ -152,7 +152,7 @@ You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more
 - [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine
 - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format
 - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript
-- [shikiji](https://shikiji.netlify.app/) - A beautiful and powerful syntax highlighter
+- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter
 - [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API
 
 ## 👨‍💻 Contributors

composables/shiki.ts

@@ -1,13 +1,13 @@
-import { type Highlighter, type BuiltinLanguage as Lang } from 'shikiji'
+import type { Highlighter, BuiltinLanguage as Lang } from 'shiki'
 
 const highlighter = ref<Highlighter>()
 
 const registeredLang = ref(new Map<string, boolean>())
-let shikijiImport: Promise<void> | undefined
+let shikiImport: Promise<void> | undefined
 
 export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlighter?: Highlighter } {
-  if (!shikijiImport) {
-    shikijiImport = import('shikiji')
+  if (!shikiImport) {
+    shikiImport = import('shiki')
       .then(async ({ getHighlighter }) => {
         highlighter.value = await getHighlighter({
           themes: [
@@ -22,11 +22,11 @@ export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlight
         })
       })
 
-    return { promise: shikijiImport }
+    return { promise: shikiImport }
   }
 
   if (!highlighter.value)
-    return { promise: shikijiImport }
+    return { promise: shikiImport }
 
   if (!registeredLang.value.get(lang)) {
     const promise = highlighter.value.loadLanguage(lang)
@@ -45,7 +45,7 @@ export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlight
   return { highlighter: highlighter.value }
 }
 
-function useShikijiTheme() {
+function useShikiTheme() {
   return useColorMode().value === 'dark' ? 'vitesse-dark' : 'vitesse-light'
 }
 
@@ -68,6 +68,6 @@ export function highlightCode(code: string, lang: Lang) {
 
   return highlighter.codeToHtml(code, {
     lang,
-    theme: useShikijiTheme(),
+    theme: useShikiTheme(),
   })
 }

composables/tiptap.ts

@@ -14,7 +14,7 @@ import { Plugin } from 'prosemirror-state'
 
 import type { Ref } from 'vue'
 import { TiptapEmojiSuggestion, TiptapHashtagSuggestion, TiptapMentionSuggestion } from './tiptap/suggestion'
-import { TiptapPluginCodeBlockShikiji } from './tiptap/shikiji'
+import { TiptapPluginCodeBlockShiki } from './tiptap/shiki'
 import { TiptapPluginCustomEmoji } from './tiptap/custom-emoji'
 import { TiptapPluginEmoji } from './tiptap/emoji'
 
@@ -70,7 +70,7 @@ export function useTiptap(options: UseTiptapOptions) {
       Placeholder.configure({
         placeholder: () => placeholder.value!,
       }),
-      TiptapPluginCodeBlockShikiji,
+      TiptapPluginCodeBlockShiki,
       History.configure({
         depth: 10,
       }),

composables/tiptap/shiki-parser.ts

@@ -1,9 +1,9 @@
-import { type Parser, createParser } from 'prosemirror-highlight/shikiji'
-import type { BuiltinLanguage } from 'shikiji/langs'
+import { type Parser, createParser } from 'prosemirror-highlight/shiki'
+import type { BuiltinLanguage } from 'shiki'
 
 let parser: Parser | undefined
 
-export const shikijiParser: Parser = (options) => {
+export const shikiParser: Parser = (options) => {
   const lang = options.language ?? 'text'
 
   // Register the language if it's not yet registered

composables/tiptap/shiki.ts

@@ -2,10 +2,10 @@ import CodeBlock from '@tiptap/extension-code-block'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 
 import { createHighlightPlugin } from 'prosemirror-highlight'
-import { shikijiParser } from './shikiji-parser'
+import { shikiParser } from './shiki-parser'
 import TiptapCodeBlock from '~/components/tiptap/TiptapCodeBlock.vue'
 
-export const TiptapPluginCodeBlockShikiji = CodeBlock.extend({
+export const TiptapPluginCodeBlockShiki = CodeBlock.extend({
   addOptions() {
     return {
       ...this.parent?.(),
@@ -15,7 +15,7 @@ export const TiptapPluginCodeBlockShikiji = CodeBlock.extend({
 
   addProseMirrorPlugins() {
     return [
-      createHighlightPlugin({ parser: shikijiParser, nodeTypes: ['codeBlock'] }),
+      createHighlightPlugin({ parser: shikiParser, nodeTypes: ['codeBlock'] }),
     ]
   },
 

docs/content/1.guide/3.contributing.md

@@ -49,5 +49,5 @@ nr test
 - [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine
 - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format
 - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript
-- [shikiji](https://shikiji.netlify.app/) - A beautiful and powerful syntax highlighter
+- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter
 - [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API

package.json

@@ -88,9 +88,9 @@
     "page-lifecycle": "^0.1.2",
     "pinia": "^2.1.4",
     "postcss-nested": "^6.0.1",
-    "prosemirror-highlight": "^0.4.0",
+    "prosemirror-highlight": "^0.5.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "shikiji": "^0.9.9",
+    "shiki": "^1.0.0",
     "simple-git": "^3.19.1",
     "slimeform": "^0.9.1",
     "stale-dep": "^0.7.0",

pnpm-lock.yaml

@@ -186,14 +186,14 @@ importers:
         specifier: ^6.0.1
         version: 6.0.1(postcss@8.4.32)
       prosemirror-highlight:
-        specifier: ^0.4.0
-        version: 0.4.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shikiji@0.9.9)
+        specifier: ^0.5.0
+        version: 0.5.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shiki@1.1.2)
       rollup-plugin-node-polyfills:
         specifier: ^0.2.1
         version: 0.2.1
-      shikiji:
-        specifier: ^0.9.9
-        version: 0.9.9
+      shiki:
+        specifier: ^1.0.0
+        version: 1.1.2
       simple-git:
         specifier: ^3.19.1
         version: 3.21.0
@@ -4112,6 +4112,10 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@shikijs/core@1.1.2:
+    resolution: {integrity: sha512-ERVzNQz88ZkDqUpWeC57Kp+Kmx5RjqeDBR1M8AGWGom4yrkITiTfXCGmjchlDSw12MhDTuPYR4HVFW8uT61RaQ==}
+    dev: false
+
   /@sigstore/bundle@2.1.0:
     resolution: {integrity: sha512-89uOo6yh/oxaU8AeOUnVrTdVMcGk9Q1hJa7Hkvalc6G3Z3CupWk4Xe9djSgJm9fMkH69s0P0cVHUoKSOemLdng==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -12113,8 +12117,8 @@ packages:
       prosemirror-view: 1.32.7
     dev: false
 
-  /prosemirror-highlight@0.4.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shikiji@0.9.9):
-    resolution: {integrity: sha512-RHGi5QjcWnWgn6bMkjbC2+ehv9Piv3D5UN/dNJG2r738NCQCFye0dkFa6c1oURsvUuwpFiQREqp1YYGpGbZOuA==}
+  /prosemirror-highlight@0.5.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shiki@1.1.2):
+    resolution: {integrity: sha512-jGj2E3WHoh6N85nlCyjjpFNsv3a6pvMXVpiz9hJfHDYmUtnSyWZNXB0rQabHOKdBYfynsbhy1SUiRRNdni0woA==}
     peerDependencies:
       '@types/hast': ^3.0.0
       highlight.js: ^11.9.0
@@ -12124,8 +12128,8 @@ packages:
       prosemirror-transform: ^1.8.0
       prosemirror-view: ^1.32.4
       refractor: ^4.8.1
-      shiki: ^0.14.0
-      shikiji: ^0.8.0 || ^0.9.0
+      shiki: ^1.0.0
+      shikiji: ^0.8.0 || ^0.9.0 || ^0.10.0
     peerDependenciesMeta:
       '@types/hast':
         optional: true
@@ -12151,7 +12155,7 @@ packages:
       prosemirror-model: 1.19.4
       prosemirror-state: 1.4.3
       prosemirror-view: 1.32.7
-      shikiji: 0.9.9
+      shiki: 1.1.2
     dev: false
 
   /prosemirror-history@1.3.2:
@@ -12939,14 +12943,10 @@ packages:
     resolution: {integrity: sha512-e+/aueHx0YeIEut6RXC6K8gSf0PykwZiHD7q7AHtpTW8Kd8TpFUIWqTwhAnrGjOyOMyrwv+syr5WPagMpDpVYQ==}
     dev: true
 
-  /shikiji-core@0.9.9:
-    resolution: {integrity: sha512-qu5Qq7Co6JIMY312J9Ek6WYjXieeyJT/fIqmkcjF4MdnMNlUnhSqPo8/42g5UdPgdyTCwijS7Nhg8DfLSLodkg==}
-    dev: false
-
-  /shikiji@0.9.9:
-    resolution: {integrity: sha512-/S3unr/0mZTstNOuAmNDEufeimtqeQb8lXvPMLsYfDvqyfmG6334bO2xmDzD0kfxH2y8gnFgSWAJpdEzksmYXg==}
+  /shiki@1.1.2:
+    resolution: {integrity: sha512-qNzFwTv5uhEDNUIwp7wHjsrffVeLbmOgWnM5mZZhoiz7G2qAUvqVfUzuWfieD45/YAKipzCtdV9SndacKtABow==}
     dependencies:
-      shikiji-core: 0.9.9
+      '@shikijs/core': 1.1.2
     dev: false
 
   /side-channel@1.0.4: