KaTeX Math

Use KaTeX to typeset inline math ($...$) and display math ($$...$$) inside your VueMarkik content. The pipeline combines two plugins:

• remark-math parses inline and block level LaTeX expressions.
• rehype-katex renders those nodes into HTML markup using KaTeX.

Install the math plugins

npm

npm install remark-math rehype-katex katex

yarn

yarn add remark-math rehype-katex katex

pnpm

pnpm add remark-math rehype-katex katex

bun

bun add remark-math rehype-katex katex

deno

deno add npm:remark-math npm:rehype-katex npm:katex

Import KaTeX’s stylesheet once in your app entry point (for example main.ts) so the rendered math picks up the correct fonts:

import 'katex/dist/katex.min.css';

Render math in VueMarkik

Pass both plugins to VueMarkik through the remarkPlugins and rehypePlugins props. Math enclosed in dollar signs will be transformed automatically. The example below uses String.raw so LaTeX backslashes can be written exactly once.

<template>
  <MarkdownHooks
    :text="proof"
    :remark-plugins="remarkPlugins"
    :rehype-plugins="rehypePlugins"
  />
</template>

<script setup lang="ts">
import {
  MarkdownHooks,
  type RemarkPlugins,
  type RehypePlugins,
} from 'vuemarkik';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';

const remarkPlugins: RemarkPlugins = [remarkMath];
const rehypePlugins: RehypePlugins = [rehypeKatex];

const proof = String.raw`
### Cayley’s Theorem

**Theorem.** Every group $G$ is isomorphic to a subgroup of the symmetric group on $G$.

**Proof.** Let $X = G$. For each $g \in G$ define the left-translation map
$$
L_g : X \to X, \quad L_g(x) = gx.
$$
Each $L_g$ is a bijection with inverse $L_{g^{-1}}$, so $L_g \in \mathrm{Sym}(X)$.
Define the map
$$
\rho : G \to \mathrm{Sym}(X), \quad \rho(g) = L_g.
$$
For all $g, h \in G$,
$$
\rho(gh) = L_{gh} = L_g \circ L_h = \rho(g)\rho(h),
$$
so $\rho$ is a homomorphism.
If $\rho(g) = \mathrm{id}_X$, then $gx = x$ for all $x \in G$.
Taking $x = e$ gives $g = e$.
Hence $\ker \rho = \{e\}$ and $\rho$ is injective. Therefore $G \cong \rho(G) \le \mathrm{Sym}(X)$.

If $|G| = n$, then $\mathrm{Sym}(X) \cong S_n$, so $G$ embeds in $S_n$.
$$
\square
$$`;
</script>

This renders as:

Configure KaTeX output

rehype-katex accepts any of the KaTeX options. Pass them as the second item in the plugin tuple to enable features such as custom macros, error reporting, or trust mode for user-supplied HTML.

const rehypePlugins: RehypePlugins = [
  [rehypeKatex, { throwOnError: false, macros: { '\\RR': '\\mathbb{R}' } }],
];

Refer to the remark-math and rehype-katex documentation for additional capabilities like equation numbering or custom renderers.