Using KaTeX in AutEng

Practical guide to integrating mathematical equations in your documentation

Why KaTeX for Documentation?

KaTeX is a fast, self-contained JavaScript library for rendering TeX math notation on the web. Unlike MathJax, KaTeX is designed for speed and doesn't require external fonts or network requests after initial load.

AutEng Has KaTeX Built-In

  • • No setup required: KaTeX is fully integrated and configured in AutEng
  • • Just start writing: Use standard LaTeX math syntax in your markdown
  • • Fast rendering: Equations render instantly as you type
  • • AI-powered generation: AutEng can generate markdown with KaTeX equations
  • • LaTeX compatibility: Supports most common LaTeX math commands

For technical documentation, especially in fields like computer science, mathematics, physics, or data science, the ability to render equations inline with your prose is essential. AutEng makes this seamless with zero configuration.

Using KaTeX in AutEng

AutEng has KaTeX fully integrated and configured. You don't need to install anything or configure any processors. Just start writing math equations using standard LaTeX syntax in your markdown documents.

Quick Start

  1. Create a new document in AutEng or open an existing one
  2. Write your markdown with math equations using $...$ for inline or $$...$$ for display math
  3. See instant preview - equations render automatically as you type
  4. Use AI generation - Ask AutEng to generate markdown with mathematical equations

AI-Powered Math Generation

AutEng's AI can generate markdown documents with properly formatted KaTeX equations. Try prompts like:

  • "Generate a proof that √2 is irrational"
  • "Create documentation for the gradient descent algorithm with equations"
  • "Write a guide to Big O notation with mathematical examples"
  • "Document the backpropagation algorithm with all the math"

Math Syntax in Markdown

KaTeX uses standard LaTeX delimiters for inline and display math. Understanding these delimiters is crucial for proper rendering.

Inline Math

Use single dollar signs $...$ for inline equations:

Inline Math Examples

See how inline math renders within text

The quadratic formula x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}x=2a−b±b2−4ac​​ solves quadratic equations.

Einstein's famous equation E=mc2E = mc^2E=mc2 relates energy and mass.

The derivative dydx\frac{dy}{dx}dxdy​ represents the rate of change.

Display Math (Block)

Use double dollar signs $$...$$ for centered display equations:

Display Math Examples

Centered equations for mathematical expressions

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}∫−∞∞​e−x2dx=π​ ∑i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}i=1∑n​i=2n(n+1)​ ∇×E=−∂B∂t\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}∇×E=−∂t∂B​

Multi-line Equations

Use the aligned environment for aligned equations:

Aligned Equations

Multi-line equations with alignment

f(x)=x2+2x+1=(x+1)2=(x+1)(x+1)\begin{aligned} f(x) &= x^2 + 2x + 1 \\ &= (x + 1)^2 \\ &= (x + 1)(x + 1) \end{aligned}f(x)​=x2+2x+1=(x+1)2=(x+1)(x+1)​

Common Use Cases

Algorithm Complexity

The time complexity is $O(n \log n)$ for merge sort.

Space complexity: $O(1)$ for in-place algorithms.

Worst case: $\Theta(n^2)$ for bubble sort.

Probability & Statistics

The probability density function:
$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$

Expected value: $E[X] = \sum_{i=1}^{n} x_i p(x_i)$

Variance: $\text{Var}(X) = E[(X - \mu)^2]$

Linear Algebra

Matrix multiplication:
$$
\mathbf{C} = \mathbf{A} \mathbf{B} = \begin{bmatrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{bmatrix}
\begin{bmatrix}
b_{11} & b_{12} \\
b_{21} & b_{22}
\end{bmatrix}
$$

Dot product: $\mathbf{a} \cdot \mathbf{b} = \sum_{i=1}^{n} a_i b_i$

Machine Learning

Gradient descent update rule:
$$
\theta_{t+1} = \theta_t - \alpha \nabla J(\theta_t)
$$

Cross-entropy loss:
$$
L = -\sum_{i=1}^{n} y_i \log(\hat{y}_i)
$$

Softmax function: $\sigma(z_i) = \frac{e^{z_i}}{\sum_{j=1}^{K} e^{z_j}}$

Best Practices

1. Use Semantic Variable Names

Choose variable names that convey meaning, especially in documentation:

// Good: Clear meaning
$\text{accuracy} = \frac{\text{correct}}{\text{total}}$

// Less clear: Single letters without context
$a = \frac{c}{t}$

2. Add Explanatory Text

Always explain equations in prose. Don't assume readers understand notation:

The loss function measures prediction error:
$$
L(y, \hat{y}) = \frac{1}{n} \sum_{i=1}^{n} (y_i - \hat{y}_i)^2
$$
where $y_i$ is the true value and $\hat{y}_i$ is the predicted value.

3. Break Complex Equations

Split complex derivations into steps for clarity:

Starting with the definition:
$$
f(x) = x^2 + 4x + 4
$$

Factor out common terms:
$$
f(x) = x^2 + 2(2x) + 4
$$

Recognize the perfect square:
$$
f(x) = (x + 2)^2
$$

4. Use Consistent Notation

Maintain consistent notation throughout your documentation. If you use $\theta$ for parameters in one section, don't switch to $w$ in another without explanation.

5. Test Rendering

Always preview your equations in the actual rendering environment. What works in one KaTeX setup might not work in another due to configuration differences.

Common Pitfalls & Solutions

Pitfall: Escaping Backslashes

In many Markdown processors, backslashes need to be escaped:

// Wrong: Single backslash
$\frac{1}{2}$

// Correct: Double backslash
$\\frac{1}{2}$

Pitfall: Underscore Conflicts

Underscores in math can conflict with Markdown emphasis:

// May cause issues
$x_i$ and $y_j$

// Safer: Use braces
$x_{i}$ and $y_{j}$

// Or escape
$x\_i$ and $y\_j$

Pitfall: Unsupported Commands

KaTeX doesn't support all LaTeX commands. Check the supported functions list.

Pitfall: Missing CSS

If equations render as plain text or look broken, ensure you've imported the KaTeX CSS file. This is the most common setup issue.

Advanced Techniques

Custom Macros

Define custom macros for frequently used notation:

// Configure KaTeX with macros
const options = {
  macros: {
    "\\RR": "\\mathbb{R}",
    "\\NN": "\\mathbb{N}",
    "\\ZZ": "\\mathbb{Z}",
    "\\norm": "\\left\\lVert #1 \\right\\rVert",
  }
};

// Now you can use: $x \in \RR$ instead of $x \in \mathbb{R}$

Colored Equations

Use color to highlight parts of equations:

$$
\color{red}{f(x)} = \color{blue}{x^2} + \color{green}{2x} + \color{orange}{1}
$$

Equation Numbering

Add equation numbers for reference:

$$
E = mc^2 \tag{1}
$$

As shown in equation (1), energy and mass are equivalent.

Performance Considerations

Optimization Tips

  • • Server-side rendering: Pre-render equations on the server to reduce client-side processing
  • • Lazy loading: Load KaTeX only on pages that contain math
  • • Caching: Cache rendered equations to avoid re-rendering on every page load
  • • Minimize equations: Use inline math sparingly; too many equations can slow page rendering
  • • Font subsetting: If using custom fonts, subset them to include only needed glyphs

Related Content

Markdown, Mermaid & KaTeX Syntax

Guide

Complete syntax reference for Markdown, Mermaid diagrams, and KaTeX math equations

Getting Started

Reference

Learn the basics of AutEng and create your first document

Features

Reference

Explore all the powerful features AutEng offers for technical documentation

Documentation Best Practices — Markdown + Mermaid + KaTeX

Guide

Comprehensive guide to creating exceptional technical documentation using Markdown, Mermaid diagrams, and KaTeX equations together

Ready to Start?

Start creating beautiful technical documentation with AutEng.

Get Started with AutEng