Svelte / SvelteKit

CodeGloss ships a Svelte wrapper at @codegloss/svelte. It supports Svelte 4 and Svelte 5.

Install

npm install codegloss @codegloss/svelte

Direct component usage

Import and use the wrapper in any .svelte file:

No CSS import needed. The Web Component bundles its styles via Shadow DOM.

SvelteKit + mdsvex

mdsvex lets you write Svelte components in markdown files. CodeGloss works with mdsvex in two ways:

Option 1: Fenced code blocks with remark plugin

Configure remark-codegloss in svelte.config.js with output: 'html' (mdsvex doesn't support MDX JSX nodes):

Now use the fenced codegloss syntax in any .md or .svx file:

Option 2: Direct <CodeGloss /> in markdown

You can also import and use the Svelte wrapper directly in mdsvex markdown:

This gives you full prop typing via svelte-check.

Both approaches together

You can mix both styles on the same page. Fenced codegloss blocks are ideal for documentation-heavy pages, while the direct wrapper is useful when you need dynamic props or programmatic control.