Sveltex

Getting Started

Note: See the docs for more information.
Note: This package is ESM-only.

pnpm dlx create-sveltex # If using PNPM
bunx     create-sveltex # If using Bun
npx      create-sveltex # If using NPM
yarn dlx create-sveltex # If using Yarn

Adding to an existing project

Installation

pnpm add -D @nvl/sveltex # If using PNPM
bun  add -D @nvl/sveltex # If using Bun
npm  add -D @nvl/sveltex # If using NPM
yarn add -D @nvl/sveltex # If using Yarn
deno add -D @nvl/sveltex # If using Deno

Basic steup

// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { sveltex } from '@nvl/sveltex';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        vitePreprocess(), // (optional)
        await sveltex({
            markdownBackend: 'unified',
            codeBackend: 'shiki',
            mathBackend: 'mathjax',
        }, {
            // Options
        }),
    ],
    extensions: ['.svelte', '.sveltex'],
};

export default config;

Now, install the backends (see IntelliSense or the error message you'd get if you tried to run the above code without installing the backends), and you should be good to go. Create a +page.sveltex file in your src/routes directory, and start adding markdown, math, code blocks, and even TeX components.

Editor integration

For VS Code, you can install the official SvelTeX extension from the marketplace. This will provide syntax highlighting for .sveltex files.

For other editors, you'd need to configure syntax highlighting yourself using the SvelTeX TextMate grammar provided within the VS Code extension.

Proper LSP-style language support is not currently implemented. Doing so via e.g. request forwarding could be an immense enrichment to the developer experience, but it's not something I can currently commit to. Contributions for this would be extremely welcome.

Acknowledgments

See acknowledgments on the project site.

Note: The TSDoc comments for many of this project's interfaces, particularly those describing options to be passed to external libraries, may be copies, paraphrasings, or adaptations of the official documentations of the respective libraries. Some notable examples are MathJax and TikZ.