Math formulas

<script setup lang="ts">
import { Comark } from '@comark/vue'
import math, { Math } from '@comark/vue/plugins/math'

const markdown = `
# Math Formula Examples

## Inline Math

The famous equation $E = mc^2$ relates energy and mass.

The Pythagorean theorem states that $a^2 + b^2 = c^2$.

## Display Math

The quadratic formula:

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

## Complex Formulas

The integral:

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

Summation:

$$
\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}
$$

Matrix:

$$
\\begin{pmatrix}
a & b \\\\
c & d
\\end{pmatrix}
$$
`
</script>

<template>
  <Suspense>
    <Comark
      :components="{ math: Math }"
      :plugins="[math()]"
    >
      {{ markdown }}
    </Comark>
  </Suspense>
</template>

Features

This example demonstrates how to use Comark with LaTeX math formulas in Vue:

• Math Plugin: Import and configure @comark/math plugin to parse $...$ and $$...$$ expressions
• Math Component: Register the Math component to render formulas using KaTeX
• Inline & Display Math: Supports both inline formulas and display equations
• Full LaTeX Syntax: All KaTeX-supported LaTeX commands work

Usage

1. Import the math plugin, component, and KaTeX CSS:

   import math from '@comark/math'
   import { Math } from '@comark/math/vue'
   import 'katex/dist/katex.min.css'
   

2. Pass the plugin to Comark:

   <Comark :plugins="[math()]" />
   

3. Register the Math component:

   <Comark :components="{ math: Math }" />
   

4. Use math expressions in your markdown:

   Inline: $E = mc^2$
   
   Display:
   $$
   x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
   $$
   

Syntax Examples

Inline Math: Use single $ delimiters

The formula $x^2 + y^2 = z^2$ is inline.

Display Math: Use double $$ delimiters

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

Fractions: \frac{numerator}{denominator}

$\frac{a}{b}$

Greek Letters: \alpha, \beta, \gamma, etc.

$\alpha + \beta = \gamma$

Subscripts & Superscripts: _ and ^

$x_1^2 + x_2^2$