How can I write mathematical formulas and have them render correctly? I have been wanting to learn LaTeX for a long time. I finally get to.

What is LaTeX

LaTeX is a free, open-source typesetting system designed for the production of professional-looking technical and scientific documentation. Unlike traditional “What You See Is What You Get” (WYSIWYG) word processors like Microsoft Word, LaTeX operates on a plain-text markup language. You write your content alongside formatting commands, which a compiler then translates into a beautifully formatted document.

You can use LaTeX:

In my case, I want to use it in this blog. I will share my setup later in this same this post.

A Little Bit of History

I like to look into the history of how a specific tech or science developed because it helps me understand why it is the way it is, because so many decisions are defined by the circumstances of the person that had to make the discovery or the creation. When you have the context, you know why the tech is the way it is. Otherwise, some of the decisions just look “weird”.

old lead printing blocks

Before computers, books were printed using movable type. Typesetters physically placed tiny lead blocks of letters and symbols into a frame, inked them, and pressed them onto paper.

For regular text, this was straightforward. But for mathematics, it was a nightmare. Imagine trying to physically arrange fractions, square roots, integrals, and tiny subscripts using pieces of lead so that they lined up perfectly on a page. It required highly skilled artisans, took forever, and was incredibly expensive.

In the late 1960s, Donald Knuth began writing a multi-volume book series called “The Art of Computer Programming”.

When the second edition of his book came back from the publishers in 1977, Knuth was horrified. Printing technology had shifted away from lead type to early digital phototypesetting, and the system the publishers used looked awful. The mathematical formulas were ugly, poorly spaced, and hard to read.

Knuth was so annoyed by the drop in quality that he decided to take a break from writing his books to solve digital typesetting once and for all. He thought it would take him a few months. It took him nearly a decade.

In 1978, Knuth created a system called TeX (pronounced “tech”).

Instead of building a visual, click-and-drag program, Knuth wrote a programming language for layout. You typed regular text, used specific backslash commands for math symbols, and the TeX engine calculated exactly how much spacing to put between characters to make the page look optically flawless.

TeX was a masterpiece of engineering, but it had one major drawback: it was incredibly low-level. You had to manually program how headers looked, how margins behaved, and how chapters were numbered.

Recognising that regular scientists, mathematicians, and engineers didn’t want to program layouts from scratch, a computer scientist named Leslie Lamport stepped in.

In 1985, Lamport wrote a massive set of macros (pre-made blueprints) on top of Knuth’s TeX engine. He called his extension LaTeX (short for Lamport TeX, pronounced “lay-tech”).

Lamport’s brilliant insight was to separate content from design:
The Writer’s Job: Focus entirely on the content. Tell the system “This is a chapter title, this is an author name, and this is a fraction.”
LaTeX’s Job: Handle the layout automatically using pre-coded, professional typographic rules.

Cheat Sheet

The Core Rules

  • Inline Math: Wrap your math in single dollar signs ($math$) to put it directly inside a sentence. Example: $x^2 + y^-1 = z$ (without the backticks) shows as $x^2 + y^-1 = z$
  • Block Math: Wrap your math in double dollar signs ($$math$$) or block brackets (\[math\]) to give it its own centered line. Example: $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ when written in its own paragraph shows as
\[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\]
  • No Spaces in Code: LaTeX ignores spaces inside math mode. $x + y = z$ looks exactly the same as $x+y=z$. If you need a visible space, use a backslash space: \.

The Important Building Blocks

Subscripts and Superscripts (Powers)

Use the underscore _ for subscripts and the caret ^ for powers.

If the subscript or power is more than one character, you must wrap it in curly braces {}.

  • $x_i$ –> $x_i$
  • $x_{max}$ –> $x_{max}$ (uses braces because “max” is 3 letters)
  • $e^{i\pi}$ –> $e^{i\pi}$

Fractions

Fractions use the \frac{numerator}{denominator} command.

  • $$\frac{1}{n}$$ –>
\[\frac{1}{n}\]
  • $$\frac{\Delta y}{\Delta x}$$ –>
\[\frac{\Delta y}{\Delta x}\]

Square Roots

Roots use the \sqrt{value} command.

  • $$\sqrt{x^2 + y^2}$$ –>
\[\sqrt{x^2 + y^2}\]

Sums and Integrals

These use special symbols combined with subscripts (bottom limit) and superscripts (top limit).

  • Summation (Σ): $$\sum_{i=1}^{n} x_i$$ –>
\[\sum_{i=1}^{n} x_i\]
  • Integral ([\int ]): $$\int_{a}^{b} f(x) \,dx$$ –>
\[\int_{a}^{b} f(x) \,dx\]

Greek Letters and Symbols

Code Output Commonly Used For
\alpha α Learning rate
\beta β Adam optimiser momentum
\theta θ Model parameters / weights
\lambda λ Regularisation strength
\sigma σ Sigmoid function / standard deviation
\mu μ Mean
\pi π Pi constant

Brackets that Scale Automatically

If you put normal parentheses ( ) around a tall fraction, the brackets look tiny and ugly: $(\frac{1}{2})$.

To make brackets automatically scale to match the height of whatever is inside them, always prefix them with \left and \right.

  • Ugly: $(\frac{a}{b})$ –> $(\frac{a}{b})$
  • Beautiful: $$\left( \frac{a}{b} \right)$$ –>
\[\left( \frac{a}{b} \right)\]

This works for square brackets too: \left[ \right].

Here in my blog, you see both cases render beautifully, that’s because of the rendering library I am using (MathJax) which chose to display things this way even without knowing the strict syntax rules. But if you were to write the brackets without the \left and \right in a strict renderer, it would show as ugly.

Some MLE Examples

  • Matrix/Vector Multiplication: $Y = X\theta$ –> $Y = X\theta$
  • Function Notation: $f(x; \theta)$ –> $f(x; \theta)$
  • Gradient/Partial Derivative: $$\frac{\partial L}{\partial w}$$ –>
\[\frac{\partial L}{\partial w}\]

How I Am Rendering LaTeX in This Blog

I am using MathJax via this snippet in _includes/head.html:

<head>
  ...

  
    <script>
      MathJax = {
        tex: {
          inlineMath: [['$', '$'], ['\\(', '\\)']],
          displayMath: [['$$', '$$'], ['\\[', '\\]']]
        }
      };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
  

</head>

Therefore all I have to do in a markdown post is add math: true to the post’s Front Matter (the top part):

---
layout: post
title: blablabla
date: ...
math: true
categories: ...
---

And this is it. Now you know how to LaTeX.