# 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](https://notionic.dev/docs/supported-blocks).

```typescript
// Customize · code.tsx
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) }} />
```

```typescript
// Customize · code-label.tsx
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>
  )
}
```

# 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
// Customize · equation.tsx
import { NotionEquation, NotionInlineEquation } from "@/components/notion-equation"

<NotionRenderer
  blocks={blocks}
  components={{ equation: NotionEquation, inline_equation: NotionInlineEquation }}
/>
```