Code and math

Code blocks, equations and Mermaid diagrams.

Each example below is a real Notion block, rendered by notionic's built-in components, followed by a recipe to change it.

Code

In Notion: type ``` or /code, then pick a language from the block's menu.

TypeScript

import { NotionRenderer } from "notionic"
import { fetchBlocks } from "notionic/fetch"

export default async function Page() {
  const blocks = await fetchBlocks(notion, pageId)
  return <NotionRenderer blocks={blocks} />
}

Renders as: a <pre> with the language's name, and the caption below. The built-in component shows the source without highlighting, so it adds no weight. See Supported blocks.

TypeScript

import { NotionCode } from "@/components/notion-code"import { withMermaid } from "@/components/notion-mermaid"
// Highlighted with Shiki, and Mermaid diagrams drawn, from the registry.<NotionRenderer blocks={blocks} components={{ code: withMermaid(NotionCode) }} />

Customize · code.tsx

TypeScript

import { defaultComponents, languageName, type BlockProps } from "notionic"
// Or keep the built-in block and add to it.const BuiltInCode = defaultComponents.code!
export function LabeledCode(props: BlockProps<"code">) {  return (    <figure className="flex flex-col gap-1">      <figcaption className="text-xs text-muted-foreground">        {languageName(props.block.code.language)}      </figcaption>      <BuiltInCode {...props} />    </figure>  )}

Customize · code-label.tsx

Mermaid

In Notion: add a code block and set its language to Mermaid.

Mermaid

graph TD
  A["Notion page"] --> B["fetchBlocks"]
  B --> C["NotionRenderer"]

Renders as: its source, like any code block. The registry's notion-mermaid draws it as a diagram, as in the recipe above.

Equation

In Notion: type /equation for a block, or wrap text in $$ for inline math.

\int_0^1 x^2 \, dx = \frac{1}{3}

Renders as: its LaTeX source as text. Add KaTeX from the registry to typeset it on the server.

TypeScript

import { NotionEquation, NotionInlineEquation } from "@/components/notion-equation"
<NotionRenderer  blocks={blocks}  components={{ equation: NotionEquation, inline_equation: NotionInlineEquation }}/>

Customize · equation.tsx