New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
KaTeX/MathJax implementation #529
Comments
Use any KaTeX/MathJax markdown-it plugin. There shouldn't be much issue IG. Here is an example: yarn add markdown-it-katex
module.exports = {
markdown: {
config: (md) => {
md.use(require("markdown-it-katex"));
},
},
};
---
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: |
Using @brc-dd 's suggestion, I get this error when trying to build.
Do you have a solution? |
Same error here |
@leonbohmann @magnetenstad Hi! I'll look into that. It was working at that time. Something might have changed in the core. |
This is the root issue BTW: vuejs/core#3746, was also reported on VuePress: vuepress/core#328 |
Did not find that issue, is the fix using the compilerOptions a valid thing? Did not try that yet.. |
@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)
}
}
}
}) |
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: |
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. |
Could you provide a page on this LaTeX topic in the doc @noClaps , thanks ! |
@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 You probably haven't added styles. See the linked repo. You need to set |
@brc-dd 👍 But the browser console shows a lot of warning messages,as follows: |
@qyingkou Refer my comment 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. However, a lot of warning messages appeared, many components could not be resolved. |
@qyingkou Ah, 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),
},
},
},
}; |
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. |
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 |
Latex is important for the expressiveness of document typesetting. |
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. |
I agree! |
docusaurus makes LaTeX default |
Could the team make this happen, please~ |
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
|
I tried to install all of them in my project, but nothing works. How can I address this problem? |
Add it inside your defineConfig call. export default defineConfig({
title: '...',
.... other stuff ....,
markdown: {
math: true
}
}) |
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
The text was updated successfully, but these errors were encountered: