VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-chart
    • markdown-chart
    • Chart.js
    • ECharts
    • Flowchart
    • Markmap
    • Mermaid
    • PlantUML
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-preview
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • Slide Demo
    • Reveal.js Themes
  • shiki

markdown-math

@vuepress/plugin-markdown-math

Add math support to your VuePress site.

This plugin allows you to use mathjax or katex to render TeX\TeXTE​X in your markdown content.

Usage

npm i -D @vuepress/plugin-markdown-math@next

# install one of the following packages:
npm i -D mathjax-full
npm i -D katex
.vuepress/config.ts
import { markdownMathPlugin } from '@vuepress/plugin-markdown-math'

export default {
  plugins: [
    markdownMathPlugin({
      // options
    }),
  ],
}

Syntax

  • Inline mode: $xxx$

    Euler's identity eiπ+1=0e^{i\pi}+1=0eiπ+1=0 is a beautiful formula in R2\mathbb{R}^2R2.

    Demo
    Euler's identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.
  • Display mode:

    $$xxx$$
    
    $$
    xxx
    $$

    ∂r∂ωr(yωω)=(yωω){(log⁡y)r+∑i=1r(−1)Ir⋯(r−i+1)(log⁡y)riωi}\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\} ∂ωr∂r​(ωyω​)=(ωyω​){(logy)r+i=1∑r​ωi(−1)Ir⋯(r−i+1)(logy)ri​}

    Demo
    $$
    \frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
    = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
    $$

Escaping

Escaping can be done by using \ before the $ character, or adding space both before and after the $ character.

The a=1a=1a=1 is a TeX equation, while $ a=1 $ and $a=1$ is not.

Demo
The $a=1$ is a TeX equation, while $ a=1 $ and \$a=1$ is not.

Support List

TeX Tutorial:

  • TeX Tutorial
  • TeX Cheat Sheets

Plugin tutorial and FAQs: TeX

Katex:

  • KaTeX Support Features
  • KaTeX Support List

Mathjax:

  • Supported TeX/LaTeX commands

Options

type

  • Type: 'katex' | 'mathjax'

  • Details:

    The package to render TeX\TeXTE​X contents.

    • 'katex': use KaTeX
    • 'mathjax': use MathJax

    When this option is not specified, the plugin will try to detect which package is installed. If both are installed, it will use "mathjax".

delimiters

  • Type: 'brackets' | 'dollars' | 'all'

  • Default: 'dollars'

  • Details: Math delimiter syntax to enable.

    • 'brackets': Use \(...\) for inline math and \[...\] for display math (LaTeX style).
    • 'dollars': Use $...$ for inline math and $$...$$ for display math (common Markdown style).
    • 'all': Enable both bracket and dollar syntaxes.

Using KaTeX

When using KaTeX, any other options will be passed to KaTeX as KatexOptions. See KaTeX Docs for all available options.

Besides, 2 special options are supported:

copy

  • Type: boolean
  • Details: Whether to enable copy extension.

mhchem

  • Type: boolean
  • Details: Whether to enable mhchem extension.

Using MathJax

When using MathJax, you can set:

tex

  • Type: object
  • Details: Options passed to TeX input parser.

output

  • Type: 'svg' | 'chtml'
  • Default: 'svg'
  • Details: Output format, either SVG or Common HTML.

chtml

  • Type: object
  • Details: Options passed to Common HTML output parser.

svg

  • Type: object
  • Details: Options passed to SVG output parser.
Edit this page on GitHub
Last Updated: 6/17/25, 6:43 PM
Contributors: 张怀文, pengzhanbo, Mister-Hope
Prev
markdown-hint
Next
markdown-preview