feat(mdx-math): add katex math support (#675)

* feat(mdx-math): add katex math support
* chore(mdx-math): add more testing contents

issue #614

README.md

@@ -24,7 +24,14 @@ A great [blog](https://blog.tazimi.dev) system based on React.js and Next.js.
 - Great tags cloud page: separate page for posts under each tag.
 - Great GitHub information card.
 - Social share buttons.
-- Syntax highlighting in code blocks using PrismJS.
+- Full-featured MDX support:
+  - GFM support.
+  - Katex math support.
+  - Annotation container support.
+  - Emoji short code support.
+  - Syntax highlighting in code blocks using PrismJS.
+  - Automatically generated sidebar navigation,
+    table of contents, previous and next links.
 - Nice animation for page transitions and dynamic routing.
 - Disqus comments system.
 - Customized 404 not found page.
@@ -36,7 +43,6 @@ A great [blog](https://blog.tazimi.dev) system based on React.js and Next.js.
 - Optimized build with `Rust` compiler.
 - Dynamic route generation for `Markdown` posts.
 - Performant `MDX` support, enhance `Markdown` with `React`.
-- Automatically generated sidebar navigation, table of contents, previous/next links.
 - Out of box support for `tailwind.css`.
 - Fully customizable through `tailwind.css`.
 - Mobile-first approach in development.

contents/implementFancyMDX.mdx

@@ -239,3 +239,50 @@ A note[^1]
 
 * [ ] to do
 * [x] done
+
+## Math
+
+Inline math formulas
+
+$\sqrt{a^2 + b^2}$
+
+$c = \pm\sqrt{a^2 + b^2}$
+
+Block math formulas
+
+$$
+L = \frac{1}{2} \rho v^2 S C_L
+$$
+
+$$
+\def\arraystretch{1.5}
+  \begin{array}{c:c:c}
+    a & b & c \\ \hline
+    d & e & f \\
+    \hdashline
+    g & h & i
+  \end{array}
+$$
+
+$$
+\begin{equation}
+  \begin{split}
+    a &= b + c \\
+      &= e + f
+  \end{split}
+\end{equation}
+$$
+
+$$
+\begin{align}
+  a &= b + c \\
+  d + e &= f
+\end{align}
+$$
+
+$$
+\begin{alignat}{2}
+  10 &x + &3 &y = 2 \\
+  3 &x + &13 &y = 4
+\end{alignat}
+$$

lib/getPostsData.ts

@@ -5,6 +5,8 @@ import { execSync } from 'node:child_process';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import readingTime from 'reading-time';
+import rehypeKatex from 'rehype-katex';
+import remarkMath from 'remark-math';
 
 const contentsPath = path.join(process.cwd(), 'contents');
 let postsData: Post[] = [];
@@ -41,7 +43,13 @@ async function generatePostData(filePath: string): Promise<Post> {
   const updateTime = execSync(
     `git log -1 --pretty=format:%aI ${filePath}`
   ).toString();
-  const source = await serialize(content, { parseFrontmatter: false });
+  const source = await serialize(content, {
+    parseFrontmatter: false,
+    mdxOptions: {
+      remarkPlugins: [remarkMath],
+      rehypePlugins: [rehypeKatex],
+    },
+  });
 
   return {
     ...fields,

package.json

@@ -42,6 +42,7 @@
     "antd": "^4.20.0",
     "classnames": "^2.3.1",
     "framer-motion": "^6.3.1",
+    "katex": "^0.15.3",
     "next": "12.1.5",
     "next-mdx-remote": "4.0.1",
     "next-progress": "^2.2.0",
@@ -77,6 +78,8 @@
     "postcss-preset-env": "^7.4.3",
     "prettier": "^2.6.2",
     "reading-time": "^1.5.0",
+    "rehype-katex": "^6.0.2",
+    "remark-math": "^5.1.1",
     "standard-version": "^9.3.2",
     "stylelint": "^14.7.1",
     "tailwindcss": "^3.0.24",

pages/post/[slug].tsx

@@ -2,6 +2,7 @@ import { Article } from '@components';
 import { PostLayout } from '@layouts';
 import { getBuildTime, getPostData, getPostsMeta } from '@lib';
 import type { Post, PostMeta } from '@types';
+import 'katex/dist/katex.css';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
 import type { ParsedUrlQuery } from 'querystring';