---
title: "Code and math"
description: "Code and math extensions add code blocks, with or without syntax highlighting, and math formulas written in LaTeX."
canonical_url: "https://tiptap.dev/docs/editor/extensions/code-and-math"
---

# Code and math

Code and math extensions add code blocks, with or without syntax highlighting, and math formulas written in LaTeX.

## When you use them

- **Code samples.** Code block adds fenced code blocks, wrapped in `pre` and `code` tags.
- **Highlighted code.** Code block lowlight adds code blocks with syntax highlighting from the lowlight library.
- **Formulas.** Mathematics inserts LaTeX formulas, inline in a line of text or as a block, and renders them with KaTeX.

## How they work

- **They are nodes.** Code blocks and math formulas are nodes in the document. Mathematics adds two of them, one for inline math and one for block math. [Nodes and marks](https://tiptap.dev/docs/editor/core-concepts/nodes-and-marks.md)
- **Code block comes with the StarterKit.** Code block is part of the [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md); Code block lowlight and Mathematics you add yourself.
- **Highlighting is separate.** Code block has no styling and no syntax highlighting. Code block lowlight highlights code, and you pass it the `lowlight` module with the languages you load.
- **Mathematics needs KaTeX.** You install `katex` with the extension and import the KaTeX styles.
- **Markdown shortcuts.** Typing three backticks and a space starts a code block. Add a language after the backticks, such as `css`, to set it.

## Related

- [Text formatting](https://tiptap.dev/docs/editor/extensions/text-formatting.md) includes the Code mark for a name or a command inside a sentence.
- [Text blocks](https://tiptap.dev/docs/editor/extensions/text-blocks.md) are the paragraphs and headings around your code.