refactor: migrate from shikiji to shiki v1 (#2591)
This commit is contained in:
ocavue
GitHub
parent
40415f34a4
commit
8eb6b2378a
@ -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
|
||||
|
||||
@ -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(),
|
||||
})
|
||||
}
|
||||
@ -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,
|
||||
}),
|
||||
|
||||
@ -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
|
||||
@ -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'] }),
|
||||
]
|
||||
},
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user