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

pull/2557/head
ocavue 2024-02-15 15:43:09 +08:00 zatwierdzone przez GitHub
rodzic 40415f34a4
commit 8eb6b2378a
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: B5690EEEBB952194
8 zmienionych plików z 37 dodań i 37 usunięć

Wyświetl plik

@ -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

Wyświetl plik

@ -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(),
})
}

Wyświetl plik

@ -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,
}),

Wyświetl plik

@ -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

Wyświetl plik

@ -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'] }),
]
},

Wyświetl plik

@ -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

Wyświetl plik

@ -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",

Wyświetl plik

@ -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: