TheLazy.Dev
Portfolio GitHub

Blog

nextjs |react |mdx |math

How to use KaTex to render math formulas with Nextjs?

kouliavtsev

kouliavtsev

Posted on July 14, 2022

How to use KaTex to render math formulas with Nextjs?

Here is an easy way to make it possible to implement math formulas inside MDX files within your Nextjs project.

To do this we will use KaTex a math typesetting library and contentlayer to source the files.

As an example will render the formula for the Pythagorean theorem.

Install packages

Assuming that you got Nextjs set up, we will need to install the following packages.

  1. Install contentlayer


yarn add contentlayer next-contentlayer
Enter fullscreen mode Exit fullscreen mode
  1. Install remark-math and rehype-katex plugins.


yarn add remark-math rehype-katex
Enter fullscreen mode Exit fullscreen mode

Configure contentlayer

In next.config.js wrap configuration options with withContentlayer.



import { withContentlayer } from 'next-contentlayer'
export default withContentlayer({})
Enter fullscreen mode Exit fullscreen mode

In the root of the project create a file contenlayer.config.js and add the configuration below.



import { defineDocumentType, makeSource } from 'contentlayer/source-files'

const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: { type: 'string', required: true },
  },
}))

export default makeSource({
  contentDirPath: 'posts',
  documentTypes: [Post]
})
Enter fullscreen mode Exit fullscreen mode

In this file, we have defined document type Post with a title field that is a string. The contentDirPath tells contentlayer the location of our sourced MDX files.

Add theorem as content

Create an MDX file posts/home.mdx.



---
title: "Pythagorean theorem"
---

a^2 + b^2 = c^2

a = side of right triangle
b = side of right triangle
c = hypotenuse
Enter fullscreen mode Exit fullscreen mode

Render home page

In /pages/index.js add the code below.



import { useMDXComponent } from 'next-contentlayer/hooks';
import { allPages } from 'contentlayer/generated';

export const getStaticProps = () => {
  const page = allPages.find((page) => page._raw.sourceFileName === "home.mdx")
  return { props: { page } }
}

export default function HomePage({ page }) {
  const MDXContent = useMDXComponent(page.body.code)

  return (
    <div>
      <h1>{page.title}</h1>
      <MDXContent />
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Render formula

We are almost there! If you boot up the app you will see that we are rendering a^2 + b^2 = c^2. Instead, you want to render the formula like this:

Pythagorean theorem

To make it work you, have add remark-math and rehype-katex to contentlayer configuration.



import { makeSource } from 'contentlayer/source-files';
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default makeSource({
  // ...
  mdx: { 
    remarkPlugins: [remarkMath], 
    rehypePlugins: [rehypeKatex],
  },
})
Enter fullscreen mode Exit fullscreen mode

The plugins will convert KaTex into HTML. To style the formula we need to load a CSS file.



import Head from "next/head";

export default function HomePage({ page }) {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossOrigin="anonymous">
      </Head>
      ...
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

And this is it, we just implemented KaTex in MDX.

💖 💪 🙅 🚩
kouliavtsev
kouliavtsev

Posted on July 14, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to use KaTex to render math formulas with Nextjs?
nextjs How to use KaTex to render math formulas with Nextjs?

July 14, 2022