Equation

1. Notion original

Inline

Block

2. Notion API

Partial output of src/routes/[slug]/notion-export.js

Inline

{
  "object": "block",
  …
  "type": "paragraph",
  "paragraph": {
    "text": [
      …
      {
        "type": "equation",
        "equation": {
          "expression": "E=mc^2"
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "E=mc^2",
        "href": null
      },
      {
        …
        "plain_text": " might be the most well-known equation on the planet, I’m slightly more fond of ",
        …
      },
      {
        "type": "equation",
        "equation": {
          "expression": "e^{iπ}=-1"
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "e^{iπ}=-1",
        "href": null
      },
      …
    ]
  }
}
  json

Block

{
  "object": "block",
  "id": "63423e49-abae-40ac-b485-83ee14260386",
  "created_time": "2022-01-26T09:55:00.000Z",
  "last_edited_time": "2022-01-26T09:55:00.000Z",
  "has_children": false,
  "archived": false,
  "type": "equation",
  "equation": {
    "expression": "\begin{CD}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{CD}"
  }
}
  json

3. Svelte output

Partial output of src/routes/[slug].svelte

Inline

<Paragraph blockProps={{…}}>
  Although <Equation block={false} katexString="E=mc^2" /> might be the most well-known equation on the
  planet, I’m slightly more fond of <Equation block={false} katexString="e^{'{'}iπ}=-1" />. Euler
  needs better branding.
</Paragraph>
  html

block={false}

Block

<Equation
  block={true}
  katexString="egin{'{'}CD}
A @>a>> B \
@VbVV @AAcA \
C @= D
end{'{'}CD}"
/>
  html

block={true}

4. Example rendering

Rendered byEquation.svelte, which relies on katex for typesetting. Notice how this implementation lets you toggle between ASCII and rendered latex by clicking on a diagram or equation.