How to add latex support to my nuxt-content blog

[AbhimanyuAryan]

My blog is very basic nothing fancy. Just plain nuxt3 and nuxt-content at abhimanyuaryan.github.com

I assumed that latex will work out-of-the-box because it works in markdown files but I didn't

Then I installed

"rehype-katex": "^7.0.0",
"remark-math": "^6.0.0",

following this blog: https://www.heeteshalwani.com/blog/math-nuxt/

and it still didn't work. Do I need to make some changes in nuxt.config.js?

Currently the website looks like this

Thanks in advance

[TheAlexLichter]

You have to add the installed plugins in your config too :)

https://content.nuxt.com/get-started/configuration#markdown

[AbhimanyuAryan]

Ok @manniL I added the plugin but it doesn't work as intended. The latex is formatted properly but it's getting repeated again without the formatting. So it's render twice on page. One with formatting, another without formatting

[bakedPotatoLord]

I had the same issue, but I solved it by by hiding all the instances of unstyled text with:

.katex-html{
  display:none;
}

[kevencarneiro]

Or in nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    markdown: {
      rehypePlugins: {
        'rehype-katex': {
          output: 'mathml' // the default value is 'htmlAndMathml'
        }
      }
    },
  }
})

[AbhimanyuAryan]

solution was using mathjax instead of katex

      remarkPlugins: ['remark-math'],
      rehypePlugins: ['rehype-mathjax'],

[onmax]

For anyone in the same situation as me "Unexpected character '\u{7f}' (Note that you need plugins to import files that are not JavaScript)"

Full error

I am getting this error:

[2:35:02 PM]  ERROR  node_modules/.pnpm/[email protected][email protected]/node_modules/canvas/build/Release/canvas.node (1:0): Unexpected character '\u{7f}' (Note that you need plugins to import files that are not JavaScript)

  at getRollupError (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
  at ParseError.initialise (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:11332:28)
  at convertNode (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13082:10)
  at convertProgram (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12399:12)
  at Module.setSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14246:24)
  at async ModuleLoader.addModuleSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18892:13) 



[2:35:02 PM]  ERROR  node_modules/.pnpm/[email protected][email protected]/node_modules/canvas/build/Release/canvas.node (1:0): Unexpected character '\u{7f}' (Note that you need plugins to import files that are not JavaScript)

You need to install canva in your system