---
title: Code Block
description: The Code Block app adds a field type for code snippets with language selection, line numbering, and line highlighting.
url: https://www.storyblok.com/docs/apps/code-block
---

# Code Block

The Code Block app adds a field type for writing and storing code snippets. The field returns a JSON object holding the code, the selected language, the highlight states, the title, and the line number offset. Render that object with a syntax highlighter such as [highlight.js](https://highlightjs.org/) or [CodeMirror](https://codemirror.net/).

## Features

-   Write code in a dedicated editor field.
-   Select the language of the snippet.
-   Add a title to the snippet.
-   Offset the first line number.
-   Highlight individual lines with configurable states.

## Setup

In the **Block Library**, select the block you want to edit, add a field, set its field type to **Plugin**, and set the custom type to `storyblok-code-block`.

The field takes the following optional options:

| Option | Type | Description |
| --- | --- | --- |
| `enableTitle` | Boolean | Shows the title input on the field. |
| `languages` | JSON | Array of language strings offered in the language selector. |
| `enableLineNumberStart` | Boolean | Shows the input that offsets the first line number. |
| `highlightStates` | JSON | Array of objects with a `value` and a `color`, used to highlight lines. |

## Further resources

[Code Block source code on GitHub](https://github.com/storyblok/field-type-examples/tree/main/code-block)

[Code Block in the app directory](https://www.storyblok.com/apps/storyblok-gmbh@code-block)

## Pagination

-   [Previous: Cloudinary Asset Manager](/docs/apps/cloudinary-asset-manager)
-   [Next: Colorpicker](/docs/apps/colorpicker)