LaTeX on Websites

Lesson 15 of 19 5 min read
  • JNext lesson
  • KPrevious lesson
  • FSearch lessons
  • EscClear search

You’ve learned to write math in LaTeX. Now you want to put it on a website. This chapter covers every practical approach: WordPress plugins, static site generators, React components, and interactive math tools. It ends with a case study of how https://gauravtiwari.org handles mathematical content.

The Core Problem

Websites are HTML. LaTeX produces PDF. Getting math from one world to the other requires a bridge. The three main approaches:

  1. Client-side rendering. Ship LaTeX syntax in HTML. A JavaScript library (KaTeX/MathJax) renders it in the browser.
  2. Server-side / build-time rendering. Convert LaTeX to HTML during the build process. No JavaScript needed in the browser.
  3. Image-based. Render equations as PNG/SVG images. The oldest approach; still used in some contexts.

WordPress

WordPress powers 40%+ of the web. Several plugins add math support:

Plugin Options

  • Plugin: WP KaTeX | Renderer: KaTeX | Rendering: Server-side | Notes: Fast, limited commands
  • Plugin: MathJax-LaTeX | Renderer: MathJax | Rendering: Client-side | Notes: Full coverage, slower
  • Plugin: Flavor (custom) | Renderer: KaTeX | Rendering: Server-side | Notes: Custom build, fastest
  • Plugin: Jetpack (LaTeX) | Renderer: WordPress.com | Rendering: Image-based | Notes: Generates PNG images

    Writing Math in WordPress

In the WordPress editor (Gutenberg), you write math in custom HTML blocks or directly in paragraph content:

<!-- Inline math -->
<p>The equation <!--M2--> is fundamental.</p>

<!-- Display math -->
<p>The quadratic formula:</p>
<!--M6-->

<!-- In a Custom HTML block -->
<div class="math-display">
<!--M7-->
</div>

Tip: Use <!--M3--> and <!--M8--> delimiters in WordPress, not dollar signs. Dollar signs conflict with WooCommerce prices, currency mentions in content, and some plugins. The backslash-parenthesis syntax is unambiguous.

Static Site Generators

Static site generators (Hugo, Jekyll, Astro, Eleventy) produce HTML files at build time. Math integration depends on the Markdown processor:

Hugo

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      [markup.goldmark.extensions.passthrough]
        enable = true
        [markup.goldmark.extensions.passthrough.delimiters]
          inline = [['$', '$'], ['<!--M4-->']]
          block = [['<!--M0-->'], ['<!--M9-->']]

Then add KaTeX or MathJax to your layout template. Hugo passes math delimiters through to HTML unprocessed, and the JS library handles rendering.

Astro

// astro.config.mjs
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
    markdown: {
        remarkPlugins: [remarkMath],
        rehypePlugins: [rehypeKatex]
    }
});

This renders math at build time. The output HTML contains pre-rendered KaTeX; only the CSS is needed in the browser.

Jekyll

<!-- In _layouts/default.html -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.16/
        dist/katex.min.css">
<script defer
  src="https://cdn.jsdelivr.net/npm/katex@0.16/
       dist/katex.min.js"></script>
<script defer
  src="https://cdn.jsdelivr.net/npm/katex@0.16/
       dist/contrib/auto-render.min.js"
  onload="renderMathInElement(document.body);">
</script>

React and Next.js

React Component (KaTeX)

import 'katex/dist/katex.min.css';
import { InlineMath, BlockMath } from 'react-katex';

function MathExample() {
    return (
        <div>
            <p>
                Inline: <InlineMath math="E = mc^2" />
            </p>
            <BlockMath math="\int_0^1 f(x)\,dx" />
        </div>
    );
}

Next.js with MDX

// next.config.mjs
import createMDX from '@next/mdx';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

const withMDX = createMDX({
    options: {
        remarkPlugins: [remarkMath],
        rehypePlugins: [rehypeKatex]
    }
});

export default withMDX({
    pageExtensions: ['js', 'jsx', 'md', 'mdx']
});

Then in your MDX files, write LaTeX naturally:

# Calculus Fundamentals

The derivative of $f(x) = x^n$ is $f'(x) = nx^{n-1}$.

<!--M1-->

Interactive Math

Static equations are powerful, but interactive math takes understanding further:

Desmos

Desmos (https://www.desmos.com) provides embeddable graphing calculators:

<iframe
    src="https://www.desmos.com/calculator/abcdef"
    width="600" height="400"
    style="border: 1px solid #ccc">
</iframe>

GeoGebra

GeoGebra (https://www.geogebra.org) offers interactive geometry and algebra:

<iframe
    src="https://www.geogebra.org/material/iframe/id/12345"
    width="600" height="400">
</iframe>

Observable / D3.js

For custom interactive visualizations, Observable notebooks or D3.js let you create explorable explanations where readers can manipulate mathematical parameters and see results in real time.

Case Study: gauravtiwari.org

Here’s the complete math rendering stack at https://gauravtiwari.org:

  1. CMS: WordPress with Gutenberg editor.
  2. Authoring: LaTeX syntax in content, using <!--M5--> and <!--M10--> delimiters.
  3. Rendering: Server-side KaTeX via a custom plugin. Math is rendered to HTML at save time (not on every page view).
  4. Caching: Rendered math is stored in post meta. Only re-rendered when content changes.
  5. Frontend: Only KaTeX CSS loaded (24 KB gzipped). Zero JavaScript for math.
  6. Fallback: If server-side rendering fails, KaTeX JS is loaded as a fallback.
  7. Performance: Math-heavy pages load in under 1 second on a 3G connection.

Live examples of LaTeX math on the web

Important: The key insight: render math during the build or save step, not at page view time. This eliminates the JavaScript dependency for readers and dramatically improves performance, especially on mobile.

QR Codes to Live Pages

Throughout this book, you’ve seen QR codes linking to live examples. Creating these in LaTeX is simple with the qrcode package:

\usepackage{qrcode}

\qrcode[height=2cm]{https://gauravtiwari.org}

This bridges print and web: readers of the physical book can scan a QR code and see the live, interactive version of an equation or example.

Choosing Your Approach

  • Scenario: Personal blog | Recommended Approach: Static site generator + build-time KaTeX
  • Scenario: WordPress site | Recommended Approach: Server-side KaTeX plugin
  • Scenario: Web application | Recommended Approach: React/Vue KaTeX component
  • Scenario: Documentation site | Recommended Approach: Astro/Docusaurus + rehype-katex
  • Scenario: Academic wiki | Recommended Approach: MathJax (broadest compatibility)
  • Scenario: User-generated content | Recommended Approach: MathJax (handles more edge cases)
  • Scenario: High-traffic, math-heavy | Recommended Approach: Server-side rendering, any library
  • Scenario: Accessibility-critical | Recommended Approach: MathJax with MathML output

    Exercises

    1. Set up a simple HTML page with KaTeX that renders 10 equations. Measure page load time with browser DevTools.
    2. Create a Hugo or Astro site with a blog post containing both inline and display math. Deploy it to a free hosting service (Vercel, Netlify).
    3. Build a React component that takes a LaTeX string as a prop and renders it with KaTeX. Handle errors gracefully.
    4. Embed a Desmos graph alongside a related equation on a web page. Make the graph illustrate the equation.
    5. If you have a WordPress site, install a math plugin and publish a post with equations. Compare the rendering quality to a LaTeX PDF of the same content.