Content: How to clean integrate latex equation inside markdown files ?

[mathieunicolas]

Hello !

I'm not quite used to the nuxt/content module, and I've never integrated latex in nuxt before, so I prefer asking you !
I'd like to write latex equations un mardown files, fetch the files thanks to the nuxt/content module, and display each articles with their equations.
At the end, I'd like to nuxt generate and serve the website with netlify.

I tried integrating through npm, and by including mathjax script in the nuxt.config.js head, but none of this worked, and I'd like to know the "best practice" to make a clean website.

Thanks !

edit : I forgot to say, I checked the remark plugin remark-html-katex and I thought installing it with npm and adding it to the markdown.plugins section of nuxt.config.js would have been a success, but it seems nothing happens when I write an equation in a markdown file.

[Atinux]

Similar to #45 and will be resolved with https://github.com/nuxt/content/pull/65

[benjamincanac]

Hey @mathieunicolas,

First of all, to make a clean website, I'd start by using create-nuxt-app:

npx create-nuxt-app my-project

Then add the content module:

yarn add @nuxt/content

and register it inside nuxt.config.js:

export default {
  modules: [
    '@nuxt/content'
  ]
}

Then to support math equations you will need to use remark-math and rehype-katex (yarn add remark-math rehype-katex).

However, a PR is actually ongoing to extend rehype plugins in the content module, so until it's merged and released you can set the @nuxt/content dependency to the PR inside your package.json:

"dependencies": {
  "@nuxt/content": "nuxt/content#feat\/rehype-plugins"
}

Then in your nuxt.config.js, you can register the two plugins:

export default {
  content: {
    markdown: {
      remarkPlugins: [
        'remark-math'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  }
}

At this point it should be working, you can then write a markdown file with LaTex inside the content folder and fetch it in your pages:

<template>
  <nuxt-content :document="document" />
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const document = await $content('math').fetch()

    return {
      document
    }
  }
}
</script>

I've made you an example here: https://github.com/benjamincanac/nuxt-content-latex

[mathieunicolas]

Thank you very much !! It works like a charm.
Example repo much appreciated !

[NebelNidas]

@benjamincanac I can't get your example to run anymore, any updates on how to accomplish this as of now?

Edit: I now got it to work, seems like npm didn't install all dependencies the first time 🤷‍♂️