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.

Rendering Logic

• Primary: Typst WASM compiler (native Typst syntax)
• Fallback: KaTeX or MathJax (for LaTeX syntax)
• Automatic fallback when Typst fails

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: for lift force.

The famous Euler's identity: .

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 .

LaTeX Compatibility

The plugin also supports traditional LaTeX syntax:

Rendering Priority

1. Typst WASM (primary): Fast, feature-rich, native Typst syntax
2. MathJax (fallback): Comprehensive LaTeX support, larger bundle
3. KaTeX (fallback): Fast LaTeX rendering, smaller bundle

Best Practices

• Use Typst syntax for better performance and smaller bundle size
• Use LaTeX syntax for compatibility with existing content
• Test complex formulas with different engines for best results