KaTeX/MathJax implementation

[ngctnnnn]

Is your feature request related to a problem? Please describe.

I am frustrated and find it difficult in implement LaTeX onto the vitepress

Describe the solution you'd like

There are many packages on applying LaTeX to the website, e.g. Mathjax

Describe alternatives you've considered

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Use any KaTeX/MathJax markdown-it plugin. There shouldn't be much issue IG.

---

Here is an example:

yarn add markdown-it-katex

.vitepress/config.js:

module.exports = {
  markdown: {
    config: (md) => {
      md.use(require("markdown-it-katex"));
    },
  },
};

index.md:

---
head:
  - - link
    - rel: stylesheet
      href: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css
---

# KaTeX Demo

$\sqrt{3x-1}+(1+x)^2$

Output:

[magnetenstad]

Using @brc-dd 's suggestion, I get this error when trying to build.

vitepress v0.22.3
✓ building client + server bundles...
✖ rendering pages...
build error:
 TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)

Do you have a solution?

[leonbohmann]

Same error here

[brc-dd]

@leonbohmann @magnetenstad Hi! I'll look into that. It was working at that time. Something might have changed in the core.

[brc-dd]

This is the root issue BTW: https://github.com/vuejs/core/issues/3746, was also reported on VuePress: https://github.com/vuepress/vuepress-next/issues/328

[leonbohmann]

Did not find that issue, is the fix using the compilerOptions a valid thing? Did not try that yet..

[brc-dd]

@lukeromanowicz Okay, so this config should work:

import { defineConfig } from 'vitepress'
import markdownItKatex from 'markdown-it-katex'

const customElements = [
  'math',
  'maction',
  'maligngroup',
  'malignmark',
  'menclose',
  'merror',
  'mfenced',
  'mfrac',
  'mi',
  'mlongdiv',
  'mmultiscripts',
  'mn',
  'mo',
  'mover',
  'mpadded',
  'mphantom',
  'mroot',
  'mrow',
  'ms',
  'mscarries',
  'mscarry',
  'mscarries',
  'msgroup',
  'mstack',
  'mlongdiv',
  'msline',
  'mstack',
  'mspace',
  'msqrt',
  'msrow',
  'mstack',
  'mstack',
  'mstyle',
  'msub',
  'msup',
  'msubsup',
  'mtable',
  'mtd',
  'mtext',
  'mtr',
  'munder',
  'munderover',
  'semantics',
  'math',
  'mi',
  'mn',
  'mo',
  'ms',
  'mspace',
  'mtext',
  'menclose',
  'merror',
  'mfenced',
  'mfrac',
  'mpadded',
  'mphantom',
  'mroot',
  'mrow',
  'msqrt',
  'mstyle',
  'mmultiscripts',
  'mover',
  'mprescripts',
  'msub',
  'msubsup',
  'msup',
  'munder',
  'munderover',
  'none',
  'maligngroup',
  'malignmark',
  'mtable',
  'mtd',
  'mtr',
  'mlongdiv',
  'mscarries',
  'mscarry',
  'msgroup',
  'msline',
  'msrow',
  'mstack',
  'maction',
  'semantics',
  'annotation',
  'annotation-xml'
]

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(markdownItKatex)
    }
  },
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => customElements.includes(tag)
      }
    }
  }
})

[brc-dd]

Using MathJax is much easier actually. You just need to do this:

import mathjax3 from 'markdown-it-mathjax3';

const customElements = ['mjx-container'];

export default {
  markdown: {
    config: (md) => {
      md.use(mathjax3);
    },
  },
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => customElements.includes(tag),
      },
    },
  },
};

Complete demo: https://github.com/brc-dd/vitepress-mathjax3

Output:

[noClaps]

To add on to this, you can also use

mjx-container>svg {
    display: block;
    margin: auto;
}

in your CSS to center the equations like KaTeX did.

[wlbksy]

Could you provide a page on this LaTeX topic in the doc @noClaps , thanks !

[noClaps]

@wlbksy I'm sorry, I don't understand what you mean. The VitePress documentation doesn't have a page on LaTeX at the moment, and seeing as it's an external plugin, they probably won't add one.

[AetaBeta]

Using MathJax is much easier actually. You just need to do this:

import mathjax3 from 'markdown-it-mathjax3';

const customElements = ['mjx-container'];

export default {
  markdown: {
    config: (md) => {
      md.use(mathjax3);
    },
  },
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => customElements.includes(tag),
      },
    },
  },
};

Complete demo: https://github.com/brc-dd/vitepress-mathjax3

Output:

why my latex fomula can not stay in one line with other text when it complied

[AetaBeta]

[brc-dd]

why my latex fomula can not stay in one line with other text when it complied

@AetaBeta You probably haven't added styles. See the linked repo. You need to set display: inline-block on mjx-container.

[qyingkou]

@brc-dd 👍 https://github.com/vuejs/vitepress/issues/529#issuecomment-1162767122 According to this issue, the configuration can indeed be successful, so that the mathematical formula can be displayed.

But the browser console shows a lot of warning messages，as follows：

How to deal with these warning messages, and how to make these unresolvable components be parsed correctly?

[brc-dd]

@qyingkou Refer my comment just above the one you linked 😅 https://github.com/vuejs/vitepress/issues/529#issuecomment-1151186631

It shouldn't be required for mathjax though. You need it only for katex.

[qyingkou]

@qyingkou Refer my comment on that issue just above the one you linked 😅 #529 (comment)

It shouldn't be required for mathjax though. You need it only for katex.

@brc-dd ：Thank you for your reply, maybe I didn't make it clear. I use "markdown-it-mathjax3" package, I completely copied the demo folder structure and configuration content you wrote. brc-dd/vitepress-mathjax3

However, a lot of warning messages appeared, many components could not be resolved. Can you tell me how should I parse it correctly?

[brc-dd]

@qyingkou Ah, markdown-it-mathjax3 has added AssistiveMML extension in its latest version. You'll need to have a config like this:

import mathjax3 from 'markdown-it-mathjax3';

const customElements = [
  'mjx-container',
  'mjx-assistive-mml',
  'math',
  'maction',
  'maligngroup',
  'malignmark',
  'menclose',
  'merror',
  'mfenced',
  'mfrac',
  'mi',
  'mlongdiv',
  'mmultiscripts',
  'mn',
  'mo',
  'mover',
  'mpadded',
  'mphantom',
  'mroot',
  'mrow',
  'ms',
  'mscarries',
  'mscarry',
  'mscarries',
  'msgroup',
  'mstack',
  'mlongdiv',
  'msline',
  'mstack',
  'mspace',
  'msqrt',
  'msrow',
  'mstack',
  'mstack',
  'mstyle',
  'msub',
  'msup',
  'msubsup',
  'mtable',
  'mtd',
  'mtext',
  'mtr',
  'munder',
  'munderover',
  'semantics',
  'math',
  'mi',
  'mn',
  'mo',
  'ms',
  'mspace',
  'mtext',
  'menclose',
  'merror',
  'mfenced',
  'mfrac',
  'mpadded',
  'mphantom',
  'mroot',
  'mrow',
  'msqrt',
  'mstyle',
  'mmultiscripts',
  'mover',
  'mprescripts',
  'msub',
  'msubsup',
  'msup',
  'munder',
  'munderover',
  'none',
  'maligngroup',
  'malignmark',
  'mtable',
  'mtd',
  'mtr',
  'mlongdiv',
  'mscarries',
  'mscarry',
  'msgroup',
  'msline',
  'msrow',
  'mstack',
  'maction',
  'semantics',
  'annotation',
  'annotation-xml',
];

export default {
  markdown: {
    config: (md) => {
      md.use(mathjax3);
    },
  },
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => customElements.includes(tag),
      },
    },
  },
};

[qyingkou]

Like the configuration as Katex，thanks @brc-dd

It seems that there will be some components that cannot be parsed after updating the package in the future, just add the name of the component （that reported the error） to customElements.

[brc-dd]

Yeah. Should we add this to core? I guess using latex is a fairly popular demand and most of the other frameworks support it out of the box. /cc @kiaking

[qyingkou]

Latex is important for the expressiveness of document typesetting. More and more development documents need to explain algorithms, and algorithms need mathematical formulas. Let us see which lucky package gets integrated into the core...

[brc-dd]

Yeah, I agree. But the main problem is the package size. Adding it will nearly double VitePress' installation size! We probably can make it an optional peer dep.

[qyingkou]

I agree！ I wonder which library you will choose. From the comparison of KateX and MathJax, the former seems to render faster. KateX

[wlbksy]

docusaurus makes LaTeX default

[nkbai]

it doesn't render multiline latex correctly, it works only for single line latex.

for example:

$$
H=H1(\alpha) \\
k=ECVRF\_nonce\_generation(SK,H) \\
\Gamma =H^x \\
c=H2(H,\Gamma,B^k,H^k) \\
s=k+cx
$$

render as :

formula: $\Gamma=H^x$

render as ：

[wlbksy]

Yeah, I agree. But the main problem is the package size. Adding it will nearly double the VitePress' installation size! We probably can make it an optional peer dep.

Could the team make this happen, please~

[Fanisting]

For the repo above, I still got the results that inline math is unavailable. I modified the existing CSS solution and it works. Here is the new code in mathjax3.css:

mjx-container {
  display: inline-block;
  margin: auto 2px -2px;
}

mjx-container > svg {
  margin: auto;
  display: inline-block;
}

[theadanielskocher]

I tried to install all of them in my project, but nothing works. How can I address this problem?

[brc-dd]

@theadanielskocher Refer https://vitepress.dev/guide/markdown#math-equations

[theadanielskocher]

Oh, when I add the code to turn on the math, it shows some errors:

What do you think I should do?

[brc-dd]

Add it inside your defineConfig call.

export default defineConfig({
  title: '...',
  .... other stuff ....,
  markdown: {
    math: true
  }
})