search

aarkue / tiptap-math-extension

Math Extension for the TipTap Editor
https://aarkue.github.io/tiptap-math-extension/
MIT License
45 stars 8 forks source link

LaTeX is rendering twice (Tiptap Vue) #3

Closed codewriter3000 closed 7 months ago

codewriter3000 commented 7 months ago

When I type in $x + 4 = 7$ into my Tiptap editor, I get something like this: image

I'm using Astro and this is a Vue component

Astro                    v4.4.9
Node                     v20.11.0
System                   Windows (x64)
Package Manager          npm
Output                   server
Adapter                  none
Integrations             @astrojs/react
                         @astrojs/tailwind
                         @astrojs/vue
                         astro-icon
aarkue commented 7 months ago

Hi, Thanks for creating this issue!

This looks like missing KaTeX CSS. Try including something like import "katex/dist/katex.min.css"; (if you are using Vite) in the file that creates the TipTap editor. Note, that you might need to install the KaTeX npm i katex from https://www.npmjs.com/package/katex to make sure the CSS is available and can be correctly bundled.

There are also other ways to load the KaTeX CSS, see https://katex.org/docs/browser.

I should probably include a mention on how to include the KaTeX CSS in the README. Will do that soon!

Let me know if that fixed your issue.