[BUG]: Some latex symbols are not rendered correctly

[gavox]

Some symbols in LaTeX are not rendered.

Describe the bug

I followed the instructions to install LaTeX in my blog, using astro-paper.

https://astro-paper.pages.dev/posts/how-to-add-latex-equations-in-blog-posts/

It mostly works, but there is a bug with the $\neq$ and $\not$ symbols. They do not get rendered, a box appears as if the symbol would not exist. Similar to what happens when you try to render emojis and but the browser does not have the required fonts installed.

To Reproduce

To reproduce the bug, use LaTeX with $\neq$ code. See for instance

https://gavox.srht.site/posts/testlatex/

Expected behavior

I would have expected the not-equal-to symbol to be rendered.

Screenshot

Thanks!

[guspatagonico]

Hi @gavox !
I can't reproduce your problem, I'm testing in my blog (based on Astro-Paper) and I get these results:

Maybe in my modified version of Astro-Paper, I could be using a different version of rehype-katex.

"dependencies": {
    "@astrojs/markdown-remark": "^6.3.1",
    "@astrojs/mdx": "^4.2.4",
    "@astrojs/rss": "^4.0.11",
    "@astrojs/sitemap": "^3.3.0",
    "@fontsource-variable/inter": "^5.2.5",
    "@fontsource/space-mono": "^5.2.5",
    "@resvg/resvg-js": "^2.6.2",
    "@tailwindcss/vite": "^4.0.14",
    "astro": "^5.7.4",
    "dayjs": "^1.11.13",
    "hast": "^1.0.0",
    "katex": "^0.16.21",
    "lodash.kebabcase": "^4.1.1",
    "playwright": "^1.51.1",
    "rehype-katex": "^7.0.1",
    "rehype-mermaid": "^3.0.0",
    "remark-collapse": "^0.1.2",
    "remark-math": "^6.0.0",
    "remark-toc": "^9.0.0",
    "satori": "^0.12.1",
    "sharp": "^0.33.5",
    "tailwindcss": "^4.0.14",
    "unist-util-visit": "^5.0.0",
    "vanilla-cookieconsent": "^3.1.0"
  },

Best of luck!

[gavox]

Thanks for checking!

I am quite new to astro, so I am afraid of breaking something if I thinker about the configuration. ¿would you say I can upgrade the packages?

These are mine:

  "dependencies": {
    "@astrojs/check": "^0.9.3",
    "@astrojs/rss": "^4.0.7",
    "@resvg/resvg-js": "^2.6.2",
    "astro": "^4.16.18",
    "fuse.js": "^7.0.0",
    "katex": "^0.16.21",
    "lodash.kebabcase": "^4.1.1",
    "playright": "^0.0.22",
    "rehype-katex": "^7.0.1",
    "rehype-mermaid": "^3.0.0",
    "remark-collapse": "^0.1.2",
    "remark-math": "^6.0.0",
    "remark-toc": "^9.0.0",
    "satori": "^0.11.0",
    "sharp": "^0.33.5",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.5.3"
  },

[guspatagonico]

You're welcome!
I don't see any difference in your packages.json for packages involved in this issue, so I think the problem can be something directly related to fonts.
Looking in Chrome Developer Tools I see your KaTeX fonts aren't loaded:

So, the lines related to font loading in Layout.astro
You can try adding these lines before </head>:

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
    />

Hope this works!

[gavox]

Your comment pointed me in the right direction. Thanks!

My blog is hosted in sr.ht. They do not allow their pages to serve scripts from other websites, so I copied katex.min.css to my webpage and uploaded it there. So far so good... but I did not copy the fonts.

It is now working well.

Muchas gracias, hermano, fuiste muy util. :D

[guspatagonico]

Great to read this! ;-) Congrats!