1
- import { getHighlighter } from 'shiki' ;
1
+ import { getHighlighterCore } from 'shiki/core'
2
+ import getWasm from 'shiki/wasm'
2
3
import { ref } from 'vue'
3
4
4
5
export const highlighter = ( ) => {
5
- const theme = 'github-dark' ;
6
6
const loaded = ref ( false ) ;
7
7
const loading = ref ( false ) ;
8
8
let highlighter ;
9
9
10
-
11
10
const install = async ( ) => {
12
11
if ( highlighter || loading . value ) {
13
12
return ;
14
13
}
15
14
16
15
loading . value = true ;
17
16
18
- const langs = [ 'html' , 'php' , 'js' , 'json' , 'vue' , 'sh' , 'blade' ] ;
19
- highlighter = await getHighlighter ( { themes : [ theme ] , langs } ) ;
17
+ highlighter = await getHighlighterCore ( {
18
+ themes : [
19
+ ( ) => import ( 'shiki/dist/themes/github-dark.mjs' ) ,
20
+ ] ,
21
+ langs : [
22
+ ( ) => import ( 'shiki/dist/langs/html.mjs' ) ,
23
+ ( ) => import ( 'shiki/dist/langs/php.mjs' ) ,
24
+ ( ) => import ( 'shiki/dist/langs/javascript.mjs' ) ,
25
+ ( ) => import ( 'shiki/dist/langs/json.mjs' ) ,
26
+ ( ) => import ( 'shiki/dist/langs/vue.mjs' ) ,
27
+ ( ) => import ( 'shiki/dist/langs/shellscript.mjs' ) ,
28
+ ( ) => import ( 'shiki/dist/langs/blade.mjs' ) ,
29
+ ] ,
30
+ loadWasm : getWasm ,
31
+ } ) ;
20
32
21
33
loaded . value = true ;
22
34
loading . value = false ;
@@ -32,7 +44,10 @@ export const highlighter = () => {
32
44
} ] ) ) ;
33
45
}
34
46
35
- return highlighter . codeToTokensBase ( text , { lang, theme } ) ;
47
+ return highlighter . codeToTokensBase ( text , {
48
+ lang,
49
+ theme : 'github-dark' ,
50
+ } ) ;
36
51
}
37
52
38
53
return { install, getLines, loaded }
0 commit comments