Typst Plugin Playground

This page demonstrates mathematical rendering capabilities using multiple engines: Typst, LaTeX, and KaTeX.

Typst Component Package (vitepress-typstex-vue)

The vitepress-typstex-vue package provides a Vue component <TypstMath> for rendering Typst or LaTeX-style expressions.

Inline Math Example

This is an inline formula: in the text.

Display Math Example

Mixed Formula (Typst Syntax)

Complex Expressions

Quadratic formula:

Matrix representation:

Summation and limits:

Rendering Engine Comparison

Let's compare the same formula rendered with three different engines.

Target formula:

\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

1. Native Typst (Typst Syntax)

Using Typst's native syntax:

2. TypstMath Fallback (MathJax)

When configured with latexEngine: 'mathjax', LaTeX-style input falls back to MathJax:

Overriding the Engine per Component

The global plugin sets the default fallback engine, but you can override it for any <TypstMath> via the latex-engine prop:

<TypstMath
  src="\\int_0^\\infty e^{-x^2}\\,dx = \\frac{\\sqrt{\\pi}}{2}"
  :is-block="true"
  latex-engine="katex"
  :fontSize="18"
/>  <!-- Force KaTeX -->

<TypstMath
  src="\\int_0^\\infty e^{-x^2}\\,dx = \\frac{\\sqrt{\\pi}}{2}"
  :is-block="true"
  latex-engine="mathjax"
  :fontSize="18"
/>  <!-- Force MathJax -->

3. markdown-it-typstex Fallback (KaTeX)

The same LaTeX formula parsed by the markdown-it-typstex plugin, falling back to KaTeX when Typst fails:

4. Pure Typst Syntax

Using Typst's mathematical syntax:

markdown-it-typstex Plugin

This plugin allows you to write math expressions directly in markdown.

Inline Math

Here's an inline formula: $L = 1/2 rho v^2 S C_L$ for lift force.

The famous Euler's identity: $e^(i pi) + 1 = 0$.

Display Math (Double Dollar Signs)

Maxwell's equations:

Display Math (Math Code Block)

You can also use fenced code blocks with math language:

More Examples

Calculus

Derivative definition:

Taylor series:

Linear Algebra

Determinant:

Eigenvalue equation:

Statistics

Normal distribution:

Bayes' theorem:

Physics

Schrödinger equation:

Lorentz transformation:

where $gamma = 1/sqrt(1-v^2/c^2)$.

LaTeX Compatibility

The plugin also supports traditional LaTeX syntax: