# Code blocks

Copy as Markdown[View as Markdown](/docs/api/code-blocks.md)

***

EventCatalog is powered by markdown files, this allows you to add custom code blocks.

EventCatalog is using [expressive-code](https://expressive-code.com/) which provides a range of additional features for your code blocks.

**Features include:**

* [Editor & Terminal Frames](https://expressive-code.com/key-features/frames/)

* [Text & Line Markers](https://expressive-code.com/key-features/text-markers/)

  * [Adding labels to line markers](https://expressive-code.com/key-features/text-markers/#adding-labels-to-line-markers) - Great way to give context to your example code.
  * [Using diff-like syntax](https://expressive-code.com/key-features/text-markers/#using-diff-like-syntax) - Add diffs to your examples (e.g Schemas)
  * [Marking individual text inside lines](https://expressive-code.com/key-features/text-markers/#marking-individual-text-inside-lines)

* [Word wrapping](https://expressive-code.com/key-features/word-wrap/)

* [And more...](https://expressive-code.com/)

## Examples of code blocks[​](#examples-of-code-blocks "Direct link to Examples of code blocks")

### Diff code blocks[​](#diff-code-blocks "Direct link to Diff code blocks")

Highlight diffs with your code, could be useful for your Schemas or any changes you want to show to your teams.

![Example](/assets/images/diff-7754356651bbb42959315aa8c943be2d.png) ![Example](/assets/images/diff2-d558ec3bc1de19244937d54bd0bee84f.png)

See <https://expressive-code.com/key-features/text-markers/#using-diff-like-syntax>

### Word highlighting[​](#word-highlighting "Direct link to Word highlighting")

If you want to highlight words in your code blocks you can use this feature.

![Example](/assets/images/word-highlight-42b11a5f3780969ac3536d4d3ad1bff3.png) ![Example](/assets/images/word-highlight2-b08b747e0dd3cf936de68375fe045a0e.png)

See <https://expressive-code.com/key-features/text-markers/#marking-individual-text-inside-lines>

### Labels to line markers[​](#labels-to-line-markers "Direct link to Labels to line markers")

Great way to give context to changes in your code. For example if your Schema has changed, then maybe use this to give context with additional labels.

![Example](/assets/images/context-diff-9385d98d9b29ad1d73889408149de92d.png)

See <https://expressive-code.com/key-features/text-markers/#adding-labels-to-line-markers>

### Frames[​](#frames "Direct link to Frames")

Nice UI for your code blocks.

![Example](/assets/images/title-blocks-07b5856da20430ba60b5dd77f12d3d4a.png)

See <https://expressive-code.com/key-features/frames/>