Syntax Highlighting for Decorated Code Blocks in Svelte Templates

This extension adds syntax highlighting to – and snippets for – the @samplekit/preprocess-shiki NPM package.

The NPM package allows you to write decorated code blocks (via Shiki) directly in Svelte templates without disrupting other tools like svelte-check, Prettier, ESLint, TypeScript, etc.

Examples

Without Extension

With Extension

Supported Syntax

The supported syntax matches that of the NPM package's preprocessor.

In Svelte markup, wrap blocks with <!-- shiki-start shiki-end --> and one liners with <!-- shiki-svelte shiki-svelte -->, <!-- shiki-html shiki-html -->, etc.

Links

• Docs
• Extension on the VSCode Marketplace
• Extension Source
• Companion NPM Package
• Companion Package Source