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:

<script>
  import CodeGloss from '@codegloss/svelte';
</script>

<CodeGloss
  code={`function greet(name) {
  return 'Hello, ' + name;
}`}
  lang="js"
  filename="greet.js"
  annotations={[
    { id: 'a1', token: 'name', line: 0, occurrence: 0,
      title: 'Parameter', text: 'The name to greet.' },
  ]}
/>

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):

import adapter from '@sveltejs/adapter-static';
import { mdsvex } from 'mdsvex';
import remarkCodegloss from 'codegloss/remark';

const config = {
  extensions: ['.svelte', '.svx', '.md'],
  preprocess: [
    mdsvex({
      extensions: ['.svx', '.md'],
      remarkPlugins: [[remarkCodegloss, { output: 'html' }]],
    }),
  ],
  kit: {
    adapter: adapter(),
  },
};

export default config;

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

```js codegloss fib.js
function fib(n) {
  return n < 2 ? n : fib(n - 1) + fib(n - 2);
}
```

```json annotations
{
  "annotations": [
    { "id": "a1", "token": "fib", "line": 0, "occurrence": 0,
      "title": "Recursion", "text": "Calls itself with smaller inputs." }
  ]
}
```

Option 2: Direct <CodeGloss /> in markdown

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

<script>
  import CodeGloss from '@codegloss/svelte';
</script>

<CodeGloss
  code={`const x = 42;`}
  lang="js"
  filename="example.js"
/>

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.