diff --git a/src/app.css b/src/app.css index e30ce37..e302cbc 100644 --- a/src/app.css +++ b/src/app.css @@ -157,3 +157,13 @@ a.current-link { color: theme('colors.magenta.500'); } } + +html.dark .shiki, +html.dark .shiki span { + color: var(--shiki-dark) !important; + background-color: var(--shiki-dark-bg) !important; + /* Optional, if you also want font styles */ + font-style: var(--shiki-dark-font-style) !important; + font-weight: var(--shiki-dark-font-weight) !important; + text-decoration: var(--shiki-dark-text-decoration) !important; +} diff --git a/svelte.config.js b/svelte.config.js index a0ac1de..242dc27 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -10,6 +10,19 @@ import { getHighlighter } from 'shiki' const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content"; +const langs = [ + "rust", + "nix", + "python", + "lean", + "javascript", + "typescript", +]; +const highlightingThemes = { + light: 'solarized-light', + dark: 'andromeeda', +}; + /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://kit.svelte.dev/docs/integrations#preprocessors @@ -27,12 +40,16 @@ const config = { ], highlight: { highlighter: async (code, lang = 'text') => { + const themes = Object.keys(highlightingThemes).map(function(k){ return highlightingThemes[k] }); const highlighter = await getHighlighter({ - themes: ['poimandres'], - langs: ['rust', 'nix', "lean", "python"] + themes, + langs, }) - await highlighter.loadLanguage('rust', 'nix', 'lean', 'python') - const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'poimandres' })) + await highlighter.loadLanguage(...langs); + const html = escapeSvelte(highlighter.codeToHtml(code, { + lang, + themes: highlightingThemes, + })) return `{@html \`${html}\` }` } },