Support for inline math using KaTeX

[ghost]

Solutions like Sphinx, GitBooks, and Dropbox Paper do this already.

[ulivz]

PR welcome.

[dacsang97]

You can use markdown-it-katex to use Katex. _ Below is my way:

• Install markdown-it-katex

  yarn add markdown-it-katex

• Modify your config.js in .vuepress

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

• Add Katex CSS into your theme or anywhere ( in exact markdown file you want to use Katex, in Layout.vue, ... )

  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">

[yyx990803]

Closing as this can be done in userland.

[higuoxing]

Thanks a lot! VuePress is awesome! Love it

[songololo]

Is anyone here still using latex equations in Vuepress?

markdown-it-katex is no longer maintained, so I've been trying @neilsustc/markdown-it-katex and markdown-it-texmath.

Both of these result in excruciatingly slow dev server startups / refreshes, as in 30+ minutes. However, production builds seem to be fine.

I'm curious if anyone knows what might be causing these slow webpack-dev-server startups / refreshes and if there is a workaround or potential solution?

Thanks.

[shigma]

@songololo Hi there!

I wrote a new plugin vuepress-plugin-mathjax yesterday. Can you try it out to see if satisfies your needs?

[songololo]

@Shigma, wow, thanks, that really makes it easier.

In the meantime I had been using the markdown-it-mathjax to parse the markdown to mathjax supported syntax, and then loading the mathjax script in the head of the file. This was not ideal because mathjax wouldn't refresh when changing pages, so I had to use a module to force mathjax to refresh on page changes.

[borttrob]

@dacsang97 Thanks for the manual. You saved my day.

I had to change the config.js block slightly to get it to work. (Kudos to https://github.com/mtobeiyf/vuepress-homepage)

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

Also in https://github.com/vuejs/vuepress/issues/289 some people proposed to add css to config.js to enable latex globally.

  head: [
    ['link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css' }],
    ['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css' }]
  ],

[ernestchu]

maginapp/vuepress-plugin-katex works perfectly for me with the latest Katex support.

[mtoorop-ximedes]

For reference, I got it to work for Vuepress v1 by taking the following steps:

• Adding markdown-it-katex as a dev package

  yarn add -D markdown-it-katex

• And configuring it in config.js without the enclosing markdown:{} part. As currently described here: https://v1.vuepress.vuejs.org/plugin/option-api.html#extendmarkdown.

  
  // Other settings in config.js not shown

module.exports = { head: [ ['link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css' }] ],

extendMarkdown: md => {
    md.set({ breaks: true })
    md.use(require('markdown-it-katex'))
}

}

- Next to that add the katex stylesheet to the `head` part. (shown above)

Note: `markdown-it-plantuml` also started working when I removed the `markdown:{}` part. Only adding it as `md.use(require('markdown-it-plantuml'))` below to the katex entry was enough.

[iSkore]

Thank you @mtoorop-ximedes!

[makabaka1880]

Why won't it work for me? https://github.com/makabaka1880/makabaka1880 I stored a snapshot of my project at the branch latex-snapshot

[makabaka1880]

Why won't it work for me? https://github.com/makabaka1880/makabaka1880 I stored a snapshot of my project at the branch latex-snapshot

in docs/README.md