Nuxt Content working with Katex

nuxtjs

It took a while to get Nuxt Content to work with Katex, mainly because NuxtJS is currently updating to a new version and so they haven't had time to prioritise support for the latest versions of remark-math and rehype-katex which enables mathematics rendering from markdown files. The solution is to downgrade the packages to what is listed below.

package.json
"dependencies": {
    "@nuxt/content": "^1.14.0",
    "nuxt": "^2.0.0",
    "rehype-katex": "^5.0.0",
    "remark-math": "^4.0.0"
}

I had issues downgrading and what worked for me was to delete the npm module folder, delete the npm cache and reinstall all the packages based on the package.json file. The commands to delete cache and reinstall all the packages is:

# cleans cache
npm cache clean --force
# reinstalls all modules
npm i

And with that, I am now able to render Katex from markdown files. Here is how it looks like.

Lift(LL) can be determined by Lift Coefficient (CLC_L) like the following equation.

L=12ρv2SCLL = \frac{1}{2} \rho v^2 S C_L