Skip to main content
Home
Browse packagesDocsSign in

@nvl/sveltex@0.4.4
Built and signed on GitHub Actions

latest
nvlang/sveltex

Svelte + Markdown + LaTeX

This package works with Node.js, Deno, BunIt is unknown whether this package works with Cloudflare Workers, Browsers
It is unknown whether this package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Bun
It is unknown whether this package works with Browsers
JSR Score
100%
Published
2 months ago (0.4.4)

Getting Started

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

Creating a new project

You can use the create-sveltex package to create a new project using SvelTeX:

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

...and follow the prompts.

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 jsr:@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.

See the docs for more information on how to use SvelTeX.

Logotype

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.

Built and signed on
GitHub Actions
View transparency log

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@nvl/sveltex

Import symbol

import * as sveltex from "@nvl/sveltex";
or

Import directly with a jsr specifier

import * as sveltex from "jsr:@nvl/sveltex";

Add Package

pnpm i jsr:@nvl/sveltex
or (using pnpm 10.8 or older)
pnpm dlx jsr add @nvl/sveltex

Import symbol

import * as sveltex from "@nvl/sveltex";

Add Package

yarn add jsr:@nvl/sveltex
or (using Yarn 4.8 or older)
yarn dlx jsr add @nvl/sveltex

Import symbol

import * as sveltex from "@nvl/sveltex";

Add Package

vlt install jsr:@nvl/sveltex

Import symbol

import * as sveltex from "@nvl/sveltex";

Add Package

npx jsr add @nvl/sveltex

Import symbol

import * as sveltex from "@nvl/sveltex";

Add Package

bunx jsr add @nvl/sveltex

Import symbol

import * as sveltex from "@nvl/sveltex";