|
1 | 1 | <script setup>
|
2 |
| - import { getHighlighter, setCDN } from 'shiki'; |
| 2 | + import { getHighlighter } from 'shiki'; |
3 | 3 | import { onMounted } from 'vue';
|
4 | 4 |
|
5 | 5 | const props = defineProps({
|
|
18 | 18 | highlight = [],
|
19 | 19 | } = props;
|
20 | 20 |
|
21 |
| - onMounted(() => { |
22 |
| - setCDN('https://unpkg.com/shiki/'); |
| 21 | + onMounted(async () => { |
23 | 22 | // @ts-ignore
|
24 |
| - getHighlighter({ theme: 'material-theme-palenight', langs: langs }).then( |
25 |
| - highlighter => { |
26 |
| - let lineOptions = []; |
27 |
| - highlight.forEach(lineNumber => { |
28 |
| - if (typeof lineNumber === 'string') { |
29 |
| - const range = lineNumber.match(/\d+/g); |
30 |
| - if (range) { |
31 |
| - for (let i = +range[0]; i <= +range[1]; i++) { |
32 |
| - lineOptions.push({ |
33 |
| - line: i, |
34 |
| - classes: ['highlighted'], |
35 |
| - }); |
36 |
| - } |
37 |
| - } |
38 |
| - } else if (typeof lineNumber === 'number') { |
| 23 | + const highlighter = await getHighlighter({ theme: 'material-theme-palenight', langs: langs }); |
| 24 | +
|
| 25 | + await highlighter.loadTheme('material-theme-palenight') |
| 26 | + await highlighter.loadLanguage('javascript') |
| 27 | +
|
| 28 | + let lineOptions = []; |
| 29 | + highlight.forEach(lineNumber => { |
| 30 | + if (typeof lineNumber === 'string') { |
| 31 | + const range = lineNumber.match(/\d+/g); |
| 32 | + if (range) { |
| 33 | + for (let i = +range[0]; i <= +range[1]; i++) { |
39 | 34 | lineOptions.push({
|
40 |
| - line: lineNumber, |
| 35 | + line: i, |
41 | 36 | classes: ['highlighted'],
|
42 | 37 | });
|
43 | 38 | }
|
| 39 | + } |
| 40 | + } else if (typeof lineNumber === 'number') { |
| 41 | + lineOptions.push({ |
| 42 | + line: lineNumber, |
| 43 | + classes: ['highlighted'], |
44 | 44 | });
|
| 45 | + } |
| 46 | + }); |
45 | 47 |
|
46 |
| - const snippet = highlighter.codeToHtml(code, { |
47 |
| - lang: lang, |
48 |
| - lineOptions: lineOptions, |
49 |
| - }); |
| 48 | + const snippet = highlighter.codeToHtml(code, { |
| 49 | + theme: 'material-theme-palenight', |
| 50 | + lang: lang, |
| 51 | + lineOptions: lineOptions, |
| 52 | + }); |
50 | 53 |
|
51 |
| - // @ts-ignore |
52 |
| - document.querySelector(`#${snippetId} .shiki-code`).innerHTML = snippet; |
53 |
| - document.querySelector(`#${snippetId} pre`)?.removeAttribute('style'); |
54 |
| - } |
55 |
| - ); |
| 54 | + // @ts-ignore |
| 55 | + document.querySelector(`#${snippetId} .shiki-code`).innerHTML = snippet; |
| 56 | + document.querySelector(`#${snippetId} pre`)?.removeAttribute('style'); |
56 | 57 | });
|
57 | 58 | </script>
|
58 | 59 |
|
|
0 commit comments