Posts Tags Categories About

Contents

Contents

Writing Mathematical Expressions in Markdown

Aan Triono avatarAan Triono  included in  category LaTeX
     790 words   4 minutes 
This article discusses writing mathematical expressions in Markdown using KaTeX

This article discusses writing mathematical expressions in Markdown using KaTeX.

–

KaTeX is a JavaScript library that allows you to render mathematical expressions using LaTeX syntax on web pages. KaTeX is known for being fast and lightweight, making it ideal for displaying mathematical expressions in Markdown, especially in web or static site applications like Hugo, Jekyll, or plain HTML sites.

This article will explain how to write mathematical expressions using KaTeX in Markdown, including basic setup, supported LaTeX syntax, and several usage examples. With this guide, you can create Markdown documents that present mathematical expressions professionally.

KaTeX has several advantages over other libraries like MathJax:

  • Speed: KaTeX is designed to render mathematical expressions instantly without affecting page performance.
  • Small Size: KaTeX file size is smaller compared to other libraries.
  • Markdown Compatibility: KaTeX is very suitable for use with Markdown on various platforms.
  • High-Quality Output: Mathematical expressions are rendered with a neat and aesthetic appearance.

Before you can write mathematical expressions with KaTeX in Markdown, you need to integrate KaTeX into your project.

If you’re working with static sites like Hugo or Jekyll, download KaTeX from its official website or use a CDN. Add KaTeX scripts and styles to your HTML file.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KaTeX Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            renderMathInElement(document.body, {
                delimiters: [
                    { left: "$$", right: "$$", display: true },
                    { left: "$", right: "$", display: false }
                ]
            });
        });
    </script>
</head>
<body>
    <h1>KaTeX Example</h1>
    <p>This is an example: $E = mc^2$</p>
</body>
</html>

If you’re using static site generators like Hugo or Jekyll, make sure to configure Markdown to support KaTeX. You can add KaTeX scripts and styles in the base layout (for example, baseof.html in Hugo).

KaTeX supports most standard LaTeX/TeX syntax.

Tip
Here is a list of TeX functions supported by KaTeX.

Here are some commonly used main categories:

To write inline mathematical expressions, use single dollar signs ($).

Example:

$E = mc^2$

$c = \pm\sqrt{a^2 + b^2}$ and \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)

Result:

$E=mc^2$

$c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)

Use double dollar signs ($$) to create mathematical expressions in block form.

Example:

$$
\int_a^b f(x) \ dx = F(b) - F(a)
$$

Result:

∫abf(x) dx=F(b)−F(a)\int_a^b f(x) \ dx = F(b) - F(a)

KaTeX supports various mathematical operators, including:

  • Addition: x + y
  • Multiplication: x \cdot y or x \times y
  • Fractions: \frac{a}{b}
  • Roots: \sqrt{x}

Example:

$$
\frac{1}{\sqrt{2\pi}} e^{-\frac{x^2}{2}}
$$

Result:

12πe−x22 \frac{1}{\sqrt{2\pi}} e^{-\frac{x^2}{2}}

Use LaTeX syntax to write Greek or special symbols:

  • Lowercase Greek: \alpha, \beta, \gamma
  • Uppercase Greek: \Gamma, \Delta
  • Others: \infty (infinity), \partial (partial derivative), \nabla (nabla operator)

Example:

$\alpha + \beta = \gamma$

Result:

α+β=γ\alpha + \beta = \gamma

KaTeX supports matrix format using the \begin{matrix} command.

Example:

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

Result:

[abcd] \begin{bmatrix} a & b \\ c & d \end{bmatrix}

You can customize delimiters in KaTeX. For example, use and and for inline, or [] for blocks.

KaTeX supports visual styles such as:

  • Bold Text: \mathbf{A} for bold letters.
  • Italic Letters: \mathit{A} for italic letters.
  • Font Size: \small, \large, \Huge.

Example:

$$
\mathbf{F} = \frac{d}{dt} \mathit{p}
$$

Result:

F=ddtp \mathbf{F} = \frac{d}{dt} \mathit{p}

KaTeX has good error handling. If you write incorrect syntax, the expression will still be rendered but will provide an error notification.

This is an example of using KaTeX in Markdown.

Famous formula by Einstein: $E = mc^2$

Here is an integral:

∫abf(x) dx=F(b)−F(a) \int_a^b f(x) \, dx = F(b) - F(a)

Matrix representation:

[1234] \begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix}

Some Greek symbols: $\alpha$, $\beta$, $\gamma$.

Bold letters: $\mathbf{A}$. Italic letters: $\mathit{A}$.

The results will be rendered according to your KaTeX configuration.

With KaTeX, you can create beautiful and efficient mathematical expressions in Markdown.

Tip
If you want to learn more about LaTeX or TeX, you can visit here. Check it out directly. 😙

Simple setup steps and extensive LaTeX syntax support make KaTeX an excellent choice for online mathematical needs. Make sure to adjust settings according to your project so that KaTeX runs optimally.

Updated on 2025-11-11  2d1c486
 KaTeX
 | Home