Nuxt v3 with nuxt-content: how to render math equations in markdown?

Question

I have a new nuxt-content site using Nuxt ([email protected] and @nuxt/[email protected]) and would like to render math equations from my markdown files using the usual $...$ syntax. What do I need to add to get katex (or any) math rendering?

Answer 1

One easy solution might be using MDC(Markdown Component) In this way you can render any Vue component in markdown. Create a general MathRender.Vue component then passes all data from md file and renders as you wish in your Vue file.

Doc Link

example.md file

::card
The content of the card
::

Card.vue

<template>
  <div class="p-6 border bg-white dark:bg-black dark:border-gray-700 rounded">
    <slot />
  </div>
</template>