katex not working

Author: abhibongale

app/blog/posts/now-playing-implementation.mdx

@@ -193,7 +193,7 @@ class AudioCNN(nn.Module):
 - Formula:
 
 $$
-||f(a) - f(p)||_2^2 + margin \leq ||f(a) - f(n)||_2^2
+f(a) - f(p)_2^2 + margin \leq ||f(a) - f(n)||_2^2
 $$
 
 Here, $(f(x))$ is the embedding function (our CNN in this case), and \(a\), \(p\), and \(n\) are the anchor, positive, and negative inputs, respectively.

app/components/mdx.tsx

@@ -3,6 +3,9 @@ import Image from 'next/image'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { highlight } from 'sugar-high'
 import React from 'react'
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+
 
 function Table({ data }) {
   let headers = data.headers.map((header, index) => (
@@ -86,6 +89,38 @@ function createHeading(level) {
   return Heading
 }
 
+
+function BlockMath({ value }) {
+  try {
+    return (
+      <pre className="katex-block">
+        <code
+          dangerouslySetInnerHTML={{
+            __html: katex.renderToString(value, { throwOnError: false }),
+          }}
+        />
+      </pre>
+    )
+  } catch (e) {
+    return <pre>{value}</pre> // Fallback if KaTeX fails to render
+  }
+}
+
+// KaTeX rendering for math
+function InlineMath({ value }) {
+  try {
+    return (
+      <span
+        dangerouslySetInnerHTML={{
+          __html: katex.renderToString(value, { throwOnError: false }),
+        }}
+      />
+    )
+  } catch (e) {
+    return <span>{value}</span> // Fallback if KaTeX fails to render
+  }
+}
+
 let components = {
   h1: createHeading(1),
   h2: createHeading(2),
@@ -97,8 +132,11 @@ let components = {
   a: CustomLink,
   code: Code,
   Table,
+  inlineMath: InlineMath,  // Add KaTeX inline math component
+  math: BlockMath,         // Add KaTeX block math component
 }
 
+
 export function CustomMDX(props) {
   return (
     <MDXRemote

app/layout.tsx

@@ -7,6 +7,7 @@ import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 import Footer from './components/footer'
 import { baseUrl } from './sitemap'
+import 'katex/dist/katex.min.css'
 
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),

app/page.tsx

@@ -1,4 +1,6 @@
 import { BlogPosts } from 'app/components/posts'
+import 'katex/dist/katex.min.css'  // Import KaTeX CSS here
+
 
 export default function Page() {
   return (

next.config.js

@@ -4,6 +4,14 @@ const nextConfig = {
   output: 'export',
   basePath: process.env.PAGES_BASE_PATH,
   assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH || '',
+   latex: {
+    renderer: 'katex',
+    options: {
+      macros: {
+        '\\RR': '\\mathbb{R}'
+      }
+    }
+  }
 
 };
 

package.json

@@ -13,6 +13,7 @@
     "@vercel/analytics": "^1.1.3",
     "@vercel/speed-insights": "^1.0.9",
     "geist": "1.2.2",
+    "katex": "^0.16.22",
     "next": "14.2.8",
     "next-mdx-remote": "^4.4.1",
     "postcss": "^8.4.35",