We will be able to render math formulas inside any content using Rehype and Remark plugins for Nuxt content.
This tutorial uses Nuxt as a web metaframework. However the code can be easily adapted to your preferred web framework.
Installing the required dependencies
To begin with, we need to install some deps. Specifically we are going to install Nuxt Content and two plugins remark-math and rehype-katex to handle the rendering.
Install the dependencies with your package manager:
pnpm add @nuxt/content remark-math rehype-katex
yarn add @nuxt/content remark-math rehype-katex
npm install @nuxt/content remark-math rehype-katex
bun add @nuxt/content remark-math rehype-katex
Add Nuxt Content to your modules in your configuration:
nuxt.config.ts
export default defineNuxtConfig({
modules: ["@nuxt/content"]
})
And now you are good to go.
Configuring Nuxt Content
Nuxt Content requires you to define a content.config.ts file at the root of your folder where you specify your collections.
Check out the official documentation to understand how to setup the configuration for your collections. However this is the most general structure for your
content.config.ts:content.config.ts
import { defineCollection, defineContentConfig, z } from "@nuxt/content";
export default defineContentConfig({
collections: {
articles: defineCollection(
{
source: "articles/**/*.md",
type: "page",
schema: z.object({
title: z.string(),
description: z.string(),
date: z.date(),
}),
}
),
},
});
Configuring the two plugins
To be able to use the two plugins, we need to add an entry to our nuxt.config.ts:
nuxt.config.ts
content: {
build: {
markdown: {
remarkPlugins: {
"remark-math": {},
},
rehypePlugins: {
"rehype-katex": {}
},
},
},
}
You can see that we are passing an empty object to the two plugins because we do not need any particular option. However you can check the documentation and customize the plugins behaviour by passing properties to their configuration.
We are almost done, last thing is to add the remark css file to our css entry:
nuxt.config.ts
css: ["katex/dist/katex.min.css"]
Rendering math formulas
There are two ways to include math formulas inside your content.
Inline mode
The first is just using the inline mode to render formulas in between text.
In this case just wrap your math formula inside two $:
This is an inline formula $log(x)$
This is an inline formula
Block mode
In this case the formula will be automatically aligned to the center and will cover all the required space. To achieve this go newline and wrap the formulas in two $$:
This is a block formula
$$
f(x)=log(x)
$$
This is a block formula
You can actually go pretty crazy with it and everything will just be awesome!
When rendering very big math formulas, the text might overflow and the katex plugin does not handle this automatically.
Handling overflow with custom css
To prevent big math formulas from overflowing, we can identify the css class that katex uses and style that with custom css.
If we analyze the page, we can see that katex is giving the css class katex-display to the math sections. So we can fix everything with this very simple css code:
.katex-display {
@apply overflow-x-auto overflow-y-hidden text-nowrap;
}
.katex-display {
overflow-x: auto;
overflow-y: hidden;
text-wrap: no-wrap;
}
You can put this css code directly into the
<style> tag of your vue component or just create a class and pass it to your ContentRenderer:<template>
<ContentRenderer v-if="data" :value="data" class="markdown-content" />
</template>
<style lang="css">
.markdown-content {
.katex-display {
@apply overflow-x-auto overflow-y-hidden text-nowrap;
}
}
</style>