Syntax Highlighting for Math in Svelte Templates

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

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

Examples

In Svelte Markup

Without Extension

With Extension

In JS Tagged Template Literal

Without Extension

With Extension

Supported Syntax

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

In Svelte markup, use <!-- \[ \] --> for display mode and <!-- \( \) --> for inline mode.

For JS tagged template literals, use katex` or latex` (case insensitive).

Links

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