qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-05 22:48:17 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

🎨 New light/dark theme for Shiki

Browse Source
This commit is contained in:
pheralb 2025-01-15 16:05:41 +00:00
parent 4bceb2137c
commit b29dfd8332
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app.css
View File

@ -72,3 +72,12 @@
src: url('/fonts/GeistMonoVariableVF.woff2') format('woff2'); src: url('/fonts/GeistMonoVariableVF.woff2') format('woff2');
font-display: swap; font-display: swap;
} }
html.dark .shiki,
html.dark .shiki span {
color: var(--shiki-dark) !important;
background-color: transparent !important;
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}

12
svelte.config.js
View File

@ -36,11 +36,19 @@ const mdsvexOptions = {
highlight: { highlight: {
highlighter: async (code, lang = 'text') => { highlighter: async (code, lang = 'text') => {
const highlighter = await getHighlighter({ const highlighter = await getHighlighter({
themes: ['vesper'], themes: ['github-light', 'github-dark'],
langs: ['javascript', 'typescript', 'bash', 'json'] langs: ['javascript', 'typescript', 'bash', 'json']
}); });
await highlighter.loadLanguage('javascript', 'typescript', 'bash'); await highlighter.loadLanguage('javascript', 'typescript', 'bash');
const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'vesper' })); const html = escapeSvelte(
highlighter.codeToHtml(code, {
lang,
themes: {
light: 'github-light',
dark: 'github-dark'
}
})
);
return `{@html \`${html}\` }`; return `{@html \`${html}\` }`;
} }
} }