Skip to content

Commit ffbdf4f

Browse files
committed
fix: updates shiki configs to display code snippets
1 parent 1ec2bb6 commit ffbdf4f

File tree

3 files changed

+38
-32
lines changed

3 files changed

+38
-32
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
2-
dist
2+
dist
3+
cache

docs/.vitepress/components/CodeSnippet.vue

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { getHighlighter, setCDN } from 'shiki';
2+
import { getHighlighter } from 'shiki';
33
import { onMounted } from 'vue';
44
55
const props = defineProps({
@@ -18,41 +18,42 @@
1818
highlight = [],
1919
} = props;
2020
21-
onMounted(() => {
22-
setCDN('https://unpkg.com/shiki/');
21+
onMounted(async () => {
2322
// @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++) {
3934
lineOptions.push({
40-
line: lineNumber,
35+
line: i,
4136
classes: ['highlighted'],
4237
});
4338
}
39+
}
40+
} else if (typeof lineNumber === 'number') {
41+
lineOptions.push({
42+
line: lineNumber,
43+
classes: ['highlighted'],
4444
});
45+
}
46+
});
4547
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+
});
5053
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');
5657
});
5758
</script>
5859

docs/.vitepress/components/Example.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,11 +142,10 @@
142142
<template>
143143
<Container>
144144
<h3 :id="titleId()" class="title">{{ title }}</h3>
145-
<a
146-
href="#"
145+
<p
147146
class="customize--anchor"
148147
:class="`customize--anchor__${animationName}`"
149-
>Customize this animation</a
148+
>Customize this animation</p
150149
>
151150
<div>
152151
<AnimationForm
@@ -203,5 +202,10 @@
203202
.customize--anchor {
204203
display: flex;
205204
justify-content: right;
205+
color: #42b883;
206+
}
207+
208+
.customize--anchor:hover {
209+
text-decoration: underline;
206210
}
207211
</style>

0 commit comments

Comments
 (0)