Vue Stream Markdown

Appearance

Mathematics ​

vue-stream-markdown provides built-in support for rendering mathematical expressions using LaTeX syntax, powered by KaTeX. Write complex equations and formulas that render beautifully alongside your content.

Syntax ​

vue-stream-markdown uses double dollar signs ($$) to delimit mathematical expressions. Unlike traditional LaTeX, single dollar signs ($) are not used to avoid conflicts with currency symbols in regular text.

Inline Math ​

Wrap inline mathematical expressions with $$:

markdown
The quadratic formula is $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ for solving equations.

The quadratic formula is for solving equations.

Block Math ​

For display-style equations, place $$ delimiters on separate lines:

markdown
$$
E = mc^2
$$

This renders the equation centered and larger:

Common Mathematical Expressions ​

Fractions ​

markdown
$$\frac{numerator}{denominator}$$

Example: ,

Square Roots ​

markdown
$$\sqrt{x}$$ or $$\sqrt[n]{x}$$

Example: ,

Exponents and Subscripts ​

markdown
$$x^2$$ or $$x_i$$ or $$x_i^2$$

Example: ,

Greek Letters ​

markdown
$$\alpha, \beta, \gamma, \delta, \theta, \pi, \sigma, \omega$$
$$\Gamma, \Delta, \Theta, \Pi, \Sigma, \Omega$$

Common letters:

Summations ​

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

The sum of first natural numbers:

Integrals ​

markdown
$$\int_{a}^{b} f(x) \, dx$$

Definite integral:

Limits ​

markdown
$$\lim_{x \to \infty} \frac{1}{x} = 0$$

Example:

Matrices ​

markdown
$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
$$

Advanced Examples ​

The Quadratic Formula ​

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

Euler's Identity ​

markdown
$$
e^{i\pi} + 1 = 0
$$

Normal Distribution ​

markdown
$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}
$$

Taylor Series ​

markdown
$$
e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots
$$

Integration by Parts ​

markdown
$$
\int u \, dv = uv - \int v \, du
$$

Special Operators and Symbols ​

Comparison Operators ​

markdown
$$\leq$$ $$\geq$$ $$\neq$$ $$\approx$$ $$\equiv$$

, , , ,

Set Notation ​

markdown
$$\in$$ $$\notin$$ $$\subset$$ $$\subseteq$$ $$\cup$$ $$\cap$$ $$\emptyset$$

, , , , ,

Logic Symbols ​

markdown
$$\land$$ $$\lor$$ $$\neg$$ $$\implies$$ $$\iff$$ $$\forall$$ $$\exists$$

, , , , , ,

Calculus Notation ​

markdown
$$\frac{dy}{dx}$$ $$\frac{\partial f}{\partial x}$$ $$\nabla$$ $$\infty$$

Derivative: , Partial: , Gradient: , Infinity:

Streaming Considerations ​

Incomplete Equations ​

vue-stream-markdown's unterminated block parser handles incomplete equations gracefully:

markdown
$$
E = mc^

During streaming, the parser detects the incomplete block-level equation and adds the closing $$ delimiter, ensuring proper rendering even before the equation is complete.

Inline vs Block Detection ​

The parser distinguishes between inline and block math:

  • Inline: $$E = mc^2$$ (same line)
  • Block: Separate lines with newlines
markdown
This is inline $$E = mc^2$$ math.

$$
E = mc^2
$$

This is block math.

This is inline math.

This is block math.

Accessibility ​

Mathematical expressions rendered by KaTeX include:

  • MathML - Machine-readable math representation
  • Title Attributes - LaTeX source in tooltips
  • Semantic HTML - Proper structure for screen readers
  • Scalable Typography - Math scales with text size settings

Performance ​

KaTeX is chosen for its performance characteristics:

  • Fast Rendering - 2-3x faster than MathJax
  • No JavaScript Runtime - Pure CSS styling (after initial render)
  • Small Bundle - Minimal impact on page load

Common Issues ​

Escaping Backslashes ​

In JavaScript/TypeScript strings, backslashes need to be escaped:

tsx
// ❌ Wrong
const markdown = '$\frac{1}{2}$'

// ✅ Correct
const markdown = '$$\\frac{1}{2}$$'

// ✅ Or use template literals
const markdown = `$$\frac{1}{2}$$`

Currency vs Math ​

vue-stream-markdown uses $$ for math to avoid conflicts with currency:

markdown
This item costs $5 and that one costs $10. (These are currency symbols)

This equation $$x = 5$$ is mathematical notation. (This is math)

This item costs 10. (These are currency symbols)

This equation is mathematical notation. (This is math)

Spacing in Equations ​

Use \, for thin space, \: for medium space, \; for thick space:

markdown
$$\int f(x) \, dx$$

Better spacing:

Resources ​