Welcome to mathsvex SvelteKit starter

Static math

With this skeleton setup we can render math with markup almost exactly like $L A T E X .$

Demo

The quadratic equation $a x^{2} + b x + c = 0$ has roots

$x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$

Source code (in mathsvex markdown)

The quadratic equation $ax^2+bx+c=0$ has roots

$$
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
$$

Clone this project

degit is the fastest way to clone this project.

npx degit https://github.com/kelvinsjk/mathlified/sites/mathsvex-starter myProject
cd myProject
npm i
npm run dev

Recreating this starter yourself

You can also recreate this starter yourself, either because the packages are out of date in the repo, or if you have different options (Typescript, ESLint, Prettier, etc) in mind.

Create SvelteKit app

Use the Svelte CLI to easily set up a SvelteKit app with your own options (e.g. with or without Typescript, ESLint, Prettier, etc).

# run the Svelte CLI and follow the prompts
npx sv create
# enter and install mathsvex
cd myProject
npm i -D mathsvex

Add preprocessor

We need to add extensions and the mathsvex preprocessor to the svelte.config.js file.

// in svelte.config.js
import { mathsvex } from 'mathsvex';

const config = {
 extensions: ['.svelte', '.md', '.math.js', '.math.ts'],
 preprocess: [vitePreprocess(), mathsvex()],
  ...
};

Add font and stylesheets

For best performance, add the ‘Temml.woff2’ font and the temml stylesheet for best performance. Refer to temml docs for more details.

<!--in the head element of app.html-->
<link
 rel="stylesheet"
 href=" https://cdn.jsdelivr.net/npm/temml@0.11.6/dist/Temml-Local.min.css "
/>

Start developing

npm run dev