search

xcatliu / pagic

A static site generator powered by Deno + React
https://pagic.org
MIT License
1.65k stars 103 forks source link

Double math for latex snippet appears, with the second math not rendered correctly #51

Closed MVEMCJSUNPE closed 4 years ago

MVEMCJSUNPE commented 4 years ago

Describe the bug When I write a latex snippet in a markdown file, it is rendered TWO times, with the second rendering not rendered correctly.

To Reproduce Any math in a markdown file will have the problem: index.md: $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

Expected behavior The math should be rendered once correctly.

Screenshots

pagic

I think it could be solved by adding a katex.min.css to "src/theme/default/assets", which will hide the mathml code and correctly style the html output, and then modifying "src/theme/default/_layout.tsx" to include katex.min.css. However, this would not correctly render math for users with their own custom _layout.tsx.

Context

xcatliu commented 4 years ago

This feature works fine in my MacBook and GitHub CI (Ububtu), you can see the build result here: https://pagic.org/docs/content.html#tex-katex

The css file (https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css) is already loaded in the page which has class="katex" element.

So maybe this bug can only repro in Windows?

haohanyang commented 4 years ago

@xcatliu Same on macOS

image

And not rendered on Chrome

MVEMCJSUNPE commented 4 years ago

Having been the one to add the math through a pull request for math, I think xcatliu just wants pagic users to manually add katex.min.css themselves. The reason why math gets rendered twice can be found in the katex documentation: katex options. Since the output option is set to 'htmlAndMathml' by default, math gets rendered once in mathml and another time in html. The html math looks weird because there is no katex.min.css included by default in pagic, although we could add katex.min.css in 'src/theme/default/assets'. If we take a look at the source for xcatliu's pagic page, we see the following: 

const Head: PagicLayout<{
  isDark: boolean;
}> = ({ config, title, head, outputPath, contentHasKatex, isDark }) => {
  const [katexCssLoadOnce, setKatexCssLoadOnce] = React.useState(contentHasKatex);
  if (contentHasKatex && !katexCssLoadOnce) setKatexCssLoadOnce(true);
...
return (
<head>
...
{katexCssLoadOnce && (
          <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
            integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
            crossOrigin="anonymous"
          />
        )}
...
</head>);
}

However, I think users would want katex to work out of the box rather than having to include 'katex.min.css'.

haohanyang commented 4 years ago

@xcatliu @MVEMCJSUNPE I recommend using Mathjax

MVEMCJSUNPE commented 4 years ago

Really? According to Cocalc Blog, KaTeX seems to be faster than MathJax by a lot. Not only that, I took a look at markdown-it-mathjax, and I'm not even sure if MathJax is available on Deno. Markdown-it-mathjax doesn't render anything, it just "converts" to LaTeX, so you would still need a MathJax module. But I haven't found any CommonJS urls that make MathJax available on Deno. Then again, I'm not that up to date with Javascript technologies, so there probably is a way to get MathJax on Deno that I'm not familiar with.

xcatliu commented 4 years ago

@MVEMCJSUNPE @haohanyang I got it. You are using the default theme which not support KaTeX yet. It will be fixed soon.

The reason I removed your code output: 'mathml' is that Chrome does not support mathml while Safari do.

image

So it's necessary to set the output to html or htmlAndMathml and load katex.min.css.

xcatliu commented 4 years ago

Fixed in v0.10.1

MVEMCJSUNPE commented 4 years ago

Yeah... I didn't realize that katex.min.css was needed to get html math to render until recently. Hopefully, chromium will support MathML by the end of 2020 so external css files aren't needed. MathML status