*

Base/components/Head/Head.tsx

@@ -43,6 +43,10 @@ export const Head = ({ title, description, imageUrl }: HeadPropTypes) => {
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={`https://iamtk.co${imageUrl}`} />
+      <link
+        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+        rel="stylesheet"
+      />
     </HeadNext>
   );
 };

Base/components/MDX/MDX.tsx

@@ -2,6 +2,8 @@ import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { serialize } from 'next-mdx-remote/serialize';
 import TweetEmbed from 'react-tweet-embed';
 import rehypeHighlight from 'rehype-highlight';
+import rehypeKatex from 'rehype-katex';
+import remarkMath from 'remark-math';
 
 import { PostAndDate } from 'Base/components/PostAndDate';
 import { SideBySideImages } from 'Base/components/SideBySideImages';
@@ -19,7 +21,10 @@ interface MDXPropTypes {
 
 export const serializeMDX = (content: string) =>
   serialize(content, {
-    mdxOptions: { rehypePlugins: [rehypeHighlight] },
+    mdxOptions: {
+      remarkPlugins: [remarkMath],
+      rehypePlugins: [rehypeHighlight, rehypeKatex],
+    },
   });
 
 const components = {

content/2023-in-review/en/index.mdx

@@ -1,5 +1,9 @@
 <SmoothRender>
 
+$$
+L = \frac{1}{2} \rho v^2 S C_L
+$$
+
 I don't have the habit of doing end-of-year reviews. Actually, I don't do it officially in my blog, but I do it myself on paper. It's a great time to _really_ reflect on my life, what I went through the year, my accomplishments, what were the challenges, and what could be better and improved for the next year.
 
 I did a monthly changelog through the year on my [newsletter](https://teekay.substack.com/) talking about the whole month and I was excited to do it here too, but now I'm contemplating the whole year.

package.json

@@ -60,6 +60,8 @@
     "prettier": "^2.4.1",
     "react-tweet-embed": "^2.0.0",
     "rehype-highlight": "6.0.0",
+    "rehype-katex": "^5.0.0",
+    "remark-math": "^3.0.0",
     "typescript": "4.6.3"
   },
   "lint-staged": {