SvelTeX

Theme

Editor integration ​

Editor features for .sveltex files — hover, completion, diagnostics, outline — across every editor that speaks LSP.

.sveltex files are not a single language: they intermix Svelte (markup, <script>, <style>, mustache tags, logic blocks) with Markdown, and are punctuated by verbatim regions — fenced code, math ($…$, $$…$$, \(…\), \[…\]), and LaTeX environments — that must not be interpreted as Svelte. The @nvl/sveltex-language-server package gives each region the treatment it deserves.

  • Full Svelte tooling, forwarded: Diagnostics, hover, completion, go-to-definition, find references, document highlight, code actions, rename, signature help, and document links — all forwarded to the upstream svelte-language-server, fully position-mapped to the source .sveltex file.

  • TeX command completion in math: Type \al inside $…$ and get \alpha and friends, with hover showing each command's Unicode symbol and signature. Completions match your mathBackend (KaTeX or MathJax), via the bundled @nvl/sveltex-math-language-server.

  • Frontmatter hover & completion: Every recognised frontmatter key (title, meta, base, link, imports, …) and every standard <meta> name documents itself on hover, with a link to MDN. Completion only offers keys valid at the cursor's nesting depth — name / content inside a meta: entry, the standard <link> attributes inside a link: entry, and so on.

  • Heading outline & folding: The Markdown headings of a .sveltex file populate the editor's outline view; folding ranges and structured selection ranges match the source's heading and block structure.

  • LaTeX features in tex verbatim: When TexLab is on PATH, hover and completion inside LaTeX verbatim environments are forwarded to it. If TexLab isn't installed, these regions are skipped silently.

  • Picks up your SvelTeX config: Reads svelte.config.{js,mjs,cjs,ts,mts,cts} from the workspace root to discover your SvelTeX setup, and live-reloads when that file (or one of its imports) changes.

Highlighting custom verbatim envs in non-VS-Code editors

For LSP clients other than VS Code (Zed, Neovim, …), the server also emits semantic tokens that flat-colour the bodies of your custom escape- and code-typed verbatim environments. VS Code achieves the same through its generated TextMate grammar instead, so the server skips semantic tokens there. See Verbatim › Editor syntax highlighting.

Setup ​

Pick your editor. The official extension bundles the language server, so there's nothing extra to install — it activates on any .sveltex file.

Install from the VS Code Marketplace — search "SvelTeX" in the Extensions view, or from a terminal:

sh
code --install-extension sveltex-preprocessor.sveltex

The first activation spawns the language server in the background; its output goes to the SvelTeX Language Server output channel if you need to debug.

Configuration ​

The language server has no configuration of its own — it reads your project's SvelTeX configuration directly from svelte.config.{js,mjs,cjs,ts,mts,cts} on the first request and re-reads whenever the file (or anything it imports) changes.

What the server picks up from there:

  • the verbatim environment names and aliases (so hover and completion know which tags carve out non-delegated regions);
  • the math delimiters and mathBackend (which spawns the correct math language server — KaTeX or MathJax — for command completion);
  • the markdown directives settings (for the region detector).

Anything else (TeX compilation settings, output paths, caching) is runtime-only and never needed by the language server.

Tip

If the language server can't find a svelte.config.*, it falls back to SvelTeX's implicit defaults and logs a notice to the output channel — the server still works, but verbatim tags you've configured won't be recognised. Add a svelte.config.js at the workspace root that imports your SvelTeX configuration.

Companion: @nvl/sveltex-math-language-server ​

Math-only LSP that does TeX command completion and hover inside math regions. Bundled with @nvl/sveltex-language-server — there's nothing to install separately; the parent server spawns it on demand based on your project's mathBackend. Useful as a standalone server too (for editors that want math features in plain .tex / .md files).

Troubleshooting ​

  • The server doesn't start. Check the editor's LSP / output channel for an error. The extension keeps syntax highlighting working even if the server fails, so the absence of hover / completion is the only outward symptom.

  • TeX command completion is missing inside $…$. The math backend is 'none' or 'custom' — neither has a corresponding math server. Set mathBackend to 'katex' or 'mathjax'.

  • No completion inside <tex> / <latex> / <tikz>. The server forwards LaTeX-verbatim regions to TexLab; if texlab isn't on PATH, these regions are silently skipped. Install TexLab (a package manager is usually easiest) and restart your editor.

  • My custom-named LaTeX environment isn't highlighted in Zed. Zed's grammar only recognises a fixed set of tag names — see Verbatim › Zed for the exact list. Build output is unaffected.

  • My custom escape / code verbatim isn't highlighted in Zed. Zed needs semantic highlighting turned on for those bodies to be coloured. See Verbatim › Semantic highlighting for the one-line setting.

  • Diagnostics for math / LaTeX are missing. Not implemented yet — math and LaTeX verbatim regions get completion and hover but no diagnostics. The full Svelte / TypeScript / CSS diagnostic stream still works in delegated regions.

For implementation details — region detection, the virtual-document strategy, position mapping — see the @nvl/sveltex-language-server README.