POSTS / Support Variables in Markdown Latex with `rehype-katex-svelte`

Published: 2024-01-25

As this issue shows, MDsveX still has some issues in showing Markdown Latex.

The issue I met is using variables in Latex like this:


As author says, the biggest issue is that svelte tries to evaluate anything in curly brackets. So expressions like kn1k_{n-1} will throw an error that n is not defined and expressions like k21k_{2-1} will come out as k1k_{1} because svelte will actually evaluate them.

Then one guy shared his solution in this comment. He made a package called rehype-katex-svelte as MDsveX plugin to solve the whole problem and it works well for me.


run the following command to add them in project:

yarn add -D [email protected]
yarn add -D rehype-katex-svelte

config them in svelte.config.js:

import remarkMath from 'remark-math'
import rehypeKatexSvelte from "rehype-katex-svelte";

  remarkPlugins: [
  rehypePlugins: [
    /* other rehype plugins... */
  /* other mdsvex config options... */

then add the CSS to the style in src/app.html:

<link rel="stylesheet" 
    href="[email protected]/dist/katex.min.css"