katex parse

src/components/NotionBlocks.astro

@@ -12,6 +12,7 @@ import Heading2 from './notion/Heading2.astro'
 import Heading3 from './notion/Heading3.astro'
 import Image from './notion/Image.astro'
 import LinkToPage from './notion/LinkToPage.astro'
+import Equation from './notion/Equation.astro'
 import NumberedListItems from './notion/NumberedListItems.astro'
 import Paragraph from './notion/Paragraph.astro'
 import Quote from './notion/Quote.astro'
@@ -88,6 +89,8 @@ const {
         return <Divider />
       case 'table':
         return <Table block={block} />
+      case 'equation':
+        return <Equation block={block} />
       case 'column_list':
         return <ColumnList block={block} headings={headings} />
       case 'synced_block':

src/components/notion/Equation.astro

@@ -17,6 +17,7 @@ if (!block.Equation) {
   class="equation"
   set:html={katex.renderToString(block.Equation.Expression, {
     throwOnError: false,
+    displayMode: true,
   })}
 />
 

src/lib/data-utils.ts

@@ -386,6 +386,7 @@ function parseRichTexts(raw: any): RichText[] {
 
     let href: string | undefined
     let mentionPageId: string | undefined
+    let equationExpression: string | undefined
 
     if (Array.isArray(decorations)) {
       for (const deco of decorations) {
@@ -418,6 +419,16 @@ function parseRichTexts(raw: any): RichText[] {
             mentionPageId =
               typeof value === 'object' && value?.id ? value.id : undefined
             break
+          case 'e': {
+            if (typeof value === 'string') {
+              equationExpression = value
+            } else if (Array.isArray(value) && typeof value[0] === 'string') {
+              equationExpression = value[0]
+            } else if (typeof text === 'string') {
+              equationExpression = text
+            }
+            break
+          }
           case 'h':
             if (typeof value === 'string') {
               annotation.Color = value
@@ -429,6 +440,27 @@ function parseRichTexts(raw: any): RichText[] {
       }
     }
 
+    if (equationExpression) {
+      const richText: RichText = {
+        Equation: { Expression: equationExpression },
+        Annotation: { ...annotation },
+        PlainText: equationExpression,
+      }
+
+      if (href) {
+        richText.Href = href
+      }
+
+      if (mentionPageId) {
+        richText.Mention = {
+          Type: 'page',
+          Page: { Id: mentionPageId },
+        }
+      }
+
+      return richText
+    }
+
     const richText = buildText(typeof text === 'string' ? text : '', href, {
       Color: annotation.Color,
       Bold: annotation.Bold,
@@ -747,6 +779,21 @@ function convertBlock(
         },
       }
     }
+    case 'equation': {
+      const expression =
+        block.properties?.title?.[0]?.[0]?.toString() ||
+        block.properties?.equation?.[0]?.[0]?.toString() ||
+        ''
+
+      if (!expression) return null
+
+      return {
+        Id: block.id,
+        Type: 'equation',
+        HasChildren: false,
+        Equation: { Expression: expression },
+      }
+    }
     case 'tweet': {
       const url = block.properties?.source?.[0]?.[0] || ''
       if (!url) return null

src/pages/blog/[...id].astro

@@ -318,15 +318,3 @@ export const prerender = false;
     })
   </script>
 </Layout>
-
-<script>
-  if (document.querySelector('.katex')) {
-    if (!document.querySelector('link[href*="katex.min.css"]')) {
-      const link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.href =
-        'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css'
-      document.head.appendChild(link)
-    }
-  }
-</script>

src/styles/global.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@import 'katex/dist/katex.min.css';
 
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));